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

您需要使用事件委派 As，当您绑定点击事件时，#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，然后分配事件。

jQuery更改按钮ID不起作用

3 个答案: