用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>