如何使用相同的按钮实现两种不同的行为

Question

I created a click event, which changes the identifier of a button. I created a second click event on the same button but this time with the new id. When I click the button, a second time. I always have the first behavior with the old id. Here is the code to better illustrate this example. The idea is to do two different behaviors with the same button

$('#button').on('click',function () {
    $(this).attr('id','buttonBis');
});

$('#buttonBis').on('click',function () {
    alert('here');
});

Answer 1

If you're changing the identifiers dynamically then you will need to use delegated event handlers:

 $(document).on('click', '#button', function() { $(this).attr('id', 'buttonBis'); }); $(document).on('click', '#buttonBis', function() { alert('here'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button">Click me twice to see the alert()</button> 

Note that dynamically changing id attributes is not considered a very good idea, and should avoided where possible. I'd suggest adding/removing classes would be a much better alternative.

Answer 2

Create function to assign event to new button id and remove attached (prevent duplication of) event by replacing the dom node by its colne ,

 $('#button').on('click',function () { $(this).attr('id','buttonBis'); //clone the node then reissign to the same node // which removes the previous attached events var self = this.cloneNode(true); $(this).replaceWith(self); newevent(); }); var newevent = function() { $('#buttonBis').on('click',function () { alert('here'); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button" >Click Me twice </button>