用Javascript綁定事件，更改元素的ID

Question

我有以下代碼：

$("#container").on("click","#button1",action1);

$("#container").on("click","#button2",action2);

function action1(){
    // do something
    // change button1 id to button2
    $("#button1").prop("id","button2");
}

function action2(){
    // do something
}

因此，當我單擊button1時，action1會將button1更改為button2。

但是問題在於更改ID后，正在執行事件action2（僅在單擊＃button2時才必須執行）

Answer 1

但是問題在於更改ID后，正在執行事件action2（僅在單擊＃button2時才必須執行）

原因是您尚未將處理程序掛鈎到button元素，而是將其掛鈎到了容器 ，然后告訴jQuery 當事件發生時 ，它應該檢查事件是否通過了與冒泡過程中的#button1選擇器。 當您將button1的id更改為button2 ，它不再匹配-但它確實與另一個處理程序匹配，因此另一個處理程序被調用。 調度的這種動態特性使事件委托變得如此有用。

您可以通過以下方式“修復”此問題

1. 不更改id ，這是不尋常的事情。

2. 直接掛鈎處理程序，而不是使用事件委托。 當然，如果您有使用委派的理由，那么這不是一個好選擇。 :-)

3. 使用別的東西，比如一類，以確定委派的按鈕on的呼叫。

但是請注意 ， id值必須唯一。 因此，如果要更改button1的id ，則不能將其更改為button2該id已在使用中。 在下面的示例中，我改用了newbutton1 。

＃2的示例（以防您真的不需要委派）：

 $("#button1").on("click",action1); $("#button2").on("click",action2); function action1(){ // do something alert("action1, the id of the button is: " + this.id); // change button1 id to newbutton1 $("#button1").prop("id","newbutton1"); } function action2(){ // do something alert("action2, the id of the button is: " + this.id); } 

 <div id="container"> <input type="button" id="button1" value="button1"> <input type="button" id="button2" value="button2"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

＃3的示例：

 $("#container").on("click", ".first-button", action1); $("#container").on("click", ".second-button", action2); function action1(){ // do something alert("action1, the id of the button is: " + this.id); // change button1 id to newbutton1 $("#button1").prop("id","newbutton1"); } function action2(){ // do something alert("action2, the id of the button is: " + this.id); } 

 <div id="container"> <input type="button" id="button1" class="first-button" value="button1"> <input type="button" id="button2" class="second-button" value="button2"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>