jQuery的更改按钮ID不起作用

Question

I am writing a program where the signin button will be changed to sign out button when the user logged in. The code is as follow:

$("#signin").button().click(function(){
  $("#dialog-user").dialog("open");
});

$.post('php/in.php',function(data){
    $("#signin").attr('id','out');
});

$("#out").button().click(function(){
   alert("clicked out");
});

I have obmitted some code in between, but basically, when the user successfully signed in, the id of #signin button will be changed to #out. However, when I click the new button with id #out, it doesn't show the alert("clicked out") that I specified. It still show the #dialog-user as if the button id is still #signin.

Please help me fix this.

Answer 1

You need to use event delegation As, #out doesn't exist when you are binding click event ie on page load

$(document).on('click',"#out",function(){
   alert("clicked out");
});

• http://learn.jquery.com/events/event-delegation/

Answer 2

For such cases you would need to delegate the event to the static ancestor. As events are bound **to the elements and not to the attributes of an element .

Try this approach..

$(document).on('click',"#out",function(){
   alert("clicked out");
});

Or

$(signin static ancestor).on('click',function(e) {
      if(e.target.id === 'signin') {
          $("#dialog-user").dialog("open");  
      }
      else if(e.target.id === 'out') {
           alert("clicked out");
      }
});

Answer 3

$("#signin").button().click(function(){
  $("#dialog-user").dialog("open");
});

$.post('php/in.php',function(data){
    $("#signin").attr('id','out');
    $("#out").button().click(function(){
       alert("clicked out");
    });
});

In your example the id is changed after the event is tied, giving nothing to tie the event to. Putting the out button click inside the post function ensures that when we get the data back from the server we change the id and THEN assign the event.