将新元素追加到div，jQuery停止为新元素工作

好的，所以我知道这个问题令人困惑，但这就是正在发生的事情。 我有一个’post’元素，它在整个页面中重复，设置如下：

 
 
  
 
 {display name} @{handle} 
 
 
 {filled with either: follow or followed} 
 
 
  

并且我的jQuery设置为当你点击div.follow-button时它会变成’follow’并发送一个POST到php页面。 设置如下：

 $('.follow-button').click( function() { var user_id = $(this).attr('id'); var follow_url = "./func/follow.func.php"; if ($(this).hasClass("follow")) { $(this).removeClass('follow').addClass('followed').text('followed'); $.ajax({ type: "POST", url: follow_url, data: {id:user_id}, // serializes the form's elements. success: function(data) { $('#'+user_id).parents('.post-basic').remove(); $.ajax({ type: "POST", url: "./func/gather.basic.func.php", data: {}, // serializes the form's elements. success: function(data) { var response = $.parseJSON(data); $('.posts').append('
'+ response[0].display_name +'@'+ response[0].name +' '+ response[0].followsYou +'
'+ response[0].follow +'
'); } }); } }); } } ); 

我刚刚开始使用jQuery，所以我确信还有很多其他方法可以做同样的事情，但实质上是：当单击div.follow-button时， div的文本会变为紧随其后，并且class会更改为followed 。 然后，向"./func/follow.func.php";发送POST请求"./func/follow.func.php"; 它做的。 如果请求成功处理，它将向"./func/gather.func.basic.php";发送另一个请求"./func/gather.func.basic.php"; 返回一个json数组。 使用数组，然后jQuery将附加到容器div.posts一个新post ，其他post与响应数据一样。 它做到了。 上面说的一切都有效，而且一切都很好。 但是，当我尝试用新的div.post单击跟随按钮时，它不起作用。 是因为jQuery已经加载了什么？

Answer 1

正如OP的评论中所提到的，我认为这是关于事件监听器如何在javascript中工作的问题。

当你这样做时：

 $('.follow-button').click(handlerFunction); 

它将事件绑定到DOM中的当前匹配项。

如果您要添加和删除要响应同一事件处理程序的元素，则有2个选项：

1）在将新内容插入DOM后更新事件处理程序…例如，您需要再次调用$(selector).on('click', handlerFunction)

或者……一个更好的解决方案

2）将事件附加到DOM中未更改的父元素 …例如

 $('body').on('click', '.follow-button', handlerFunction); 

附加了HTML 正文的事件监听器，但只有当“clicked”项与选择器匹配时才会触发事件…

此外， 您可能希望将其放在更具体的父元素上，而不是身体上 。 我不知道你是页面结构，所以这是一个简单的例子。