我更改了按鈕的屬性 id。舊 ID #slide_save_button 具有淺藍色，而新 ID #slide_save_button_open 具有深藍色，它會在應有的時候更改。但是當我嘗試單擊按鈕（通過參考其新 ID #slide_save_button_open）時，它不會執行 console.log("clicked")。為什么？
$("#catName").on("input", function(){
if( $("#catName").val().length > 0 ){
$("#slide_save_button").attr('id', 'slide_save_button_open');
} else {
$("#slide_save_button_open").attr('id', 'slide_save_button');
}
});
$("#slide_save_button_open").on("click", function(){
console.log("clicked");
});
uj5u.com熱心網友回復：
您的方法失敗了，因為代碼會及時查找該元素。當它找到它時，它會系結它。代碼不會一直尋找元素。
要按照您的方式進行操作，您需要使用事件委托。
$("#catName").on("input", function() {
if ($("#catName").val().length > 0) {
$("#slide_save_button").attr('id', 'slide_save_button_open');
} else {
$("#slide_save_button_open").attr('id', 'slide_save_button');
}
});
$(document).on("click", "#slide_save_button_open", function() {
console.log("clicked");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<label for="catName">Name:</label>
<input id="catName" name="catName"/>
<button type="button" id="slide_save_button" name="slide_save_button">Run</button>
</form>現在更改 id 并不是最好的解決方案。您可能應該采用“驗證”方法并使用變數來保存狀態，或者您可以使用類。
const btn = $("#slide_save_button");
$("#catName").on("input", function() {
btn.toggleClass("open", $("#catName").val().length > 0);
});
btn.on("click", function() {
if (btn.hasClass("open")) {
console.log("clicked");
} else {
console.log("need to fill in");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<label for="catName">Name:</label>
<input id="catName" name="catName" />
<button type="button" id="slide_save_button" name="slide_save_button">Run</button>
</form>但是你可以只使用 HTML5 驗證
const form = $("#myForm");
form.on("submit", function (evt) {
evt.preventDefault();
console.log("clicked");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<label for="catName">Name:</label>
<input id="catName" name="catName" required/>
<button type="submit" id="slide_save_button" name="slide_save_button">Run</button>
</form>uj5u.com熱心網友回復：
$("#slide_save_button_open")檢索DOM對于具有該ID的元件現在。然后向其添加事件處理程式。
當您稍后更改 ID 時，它不會追溯洗掉現有的事件處理程式并重新運行原始代碼以附加新的事件處理程式。
您可以使用事件委托來實作類似的功能，將事件處理程式系結到祖先元素并偵聽冒泡事件。
$(document).on("click", "#slide_save_button_open", function () { .... });
您還可以測驗有關事件處理程式中元素的某些內容：
$("#slide_save_button").on("input", function(e) {
if ( $(e.currentTarget).attr('id') === 'slide_save_button_open') {
也就是說，我建議測驗元素的不同功能，而不是更改 ID。即使處于不同的狀態，它仍然是同一件事。
查看導航選單按鈕示例。你可以利用aria-expanded="true".
uj5u.com熱心網友回復：
基于此https://stackoverflow.com/a/27041899/15924734更改 ID 屬性是不行的。對于您需要的，您可以使用 addClass(), removeClass()&toggleClass()
同樣對于動態元素，您可以使用這個：
$(document).on("click", "#test-element", function() {
console.log("clicked");
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381594.html
標籤：javascript html 查询 css