jquery - jQuery更改按钮ID不起作用

Question

我正在编写一个程序，当用户登录时，登录按钮将更改为退出按钮。代码如下：

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

我已经省略了一些代码，但基本上，当用户成功登录时，#signin 按钮的 id 将更改为 #out。但是，当我单击 ID 为 #out 的新按钮时，它不会显示我指定的警报（“clicked out”）。它仍然显示#dialog-user，好像按钮 id 仍然是#signin。

请帮我解决这个问题。

Answer 1

您需要使用事件委托作为，#out当您绑定点击事件时不存在，即在页面加载时

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

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

Answer 2

对于这种情况，您需要将事件委托给静态祖先。因为事件绑定到元素而不是元素的属性。

试试这个方法。。

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

或者

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

在您的示例中，事件绑定后 id 被更改，没有提供任何将事件绑定到的内容。在 post 函数中单击 out 按钮可确保当我们从服务器取回数据时，我们会更改 id 并分配事件。