Binding events with Javascript, changing id of elements

Question

I have this code:

$("#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
}

So when I click on button1, the action1 will change the button1 to button2.

But the problem is after changing the id, the event action2 (which only must be executed when clicking #button2) is being executed

Answer 1

But the problem is after changing the id, the event action2 (which only must be executed when clicking #button2) is being executed

The reason is that you haven't hooked the handler to the button element, you've hooked it to the container , and then told jQuery that when the event happens , it should check to see if the event travelled through an element that matches the #button1 selector during the bubbling process. When you change button1's id to button2 , it doesn't match anymore — but it does match the other handler, so the other handler gets called. This dynamic nature of the dispatching is what makes event delegation so useful.

You can "fix" this by

1. Not changing the id , which is an unusual thing to do.

2. Hooking the handler directly rather than using event delegation. Of course, if you have a reason for using delegation, this isn't a good option. :-)

3. Using something else, like a class, to identify the buttons in the delegated on calls.

Note , however, that id values must be unique. So if you're going to change the id of button1 , you can't change it to button2 — that id is already in use. In the examples below, I've used newbutton1 instead.

Example of #2 (in case you didn't really need delegation):

 $("#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> 

Example of #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>