如何在AJAX返回的HTML中调用jQuery函数

我有一个页面，我发帖，用户都要发表评论。 注释使用AJAX处理。 每个评论行都有一个“投票”按钮。

在索引页面中，我将jQuery函数用于投票

 $(function() { $('.voteUpBtn').click(function() { // Cast your vote } }  

现在，当用户提交新注释时，它会进行AJAX调用并使用jQuery将HTML附加到索引页面

 $.ajax({ type: "POST", url: "proc/add-line.php", data: dataString, cache: false, success: function(html){ $("ul#nextLines").append(html); } }); 

在附加的HTML上，我有相同的投票按钮。 （每个评论都有一个相应的投票按钮）。

问题是，AJAX生成的新注释上的“投票”按钮不起作用。 如果我刷新页面，则投票有效（尽管我使用相同的标记）。

如何让投票按钮在AJAX中返回HTML？

Answer 1

使用live而不是click ：

 $('.voteUpBtn').live('click', function() { // Cast your vote } 

Answer 2

更新

这是一个古老的答案。 从jQuery 1.7开始，使用.on()来实现相同的结果。 相当于下面的原始答案的片段，现在是：

 $('#ul.nextlines').on('click', '.voteUpBtn', function (e) { // your voting logic here }); 

---

原始答案

我建议在.live()使用.delegate() .live() 。 两者都可以工作，但在包含对象上有一个事件处理程序更清晰。

 $('#ul.nextlines').delegate( '.voteUpBtn', 'click', function(){ // your voting logic here }); 

除非您指定上下文，否则.live()将基本上将处理程序绑定到整个DOM的根，因此会监视整个文档中的事件。 此外，使用.live() ，选择器会立即运行，即使将来会产生所需的效果。 因此.live()执行.delegate()不如.delegate() ，其范围受到约束，其选择器（在本例中为“.voteUpBtn”）不会立即运行。 在某些情况下，这些性能差异可能会很明显，例如包含许多行的表或包含许多项的列表。

---

Answer 3

使用delegate而不是live （如果你可以使用jQuery> 1.4），因为它更有效 。

动态添加的元素不会在原始绑定上没有live或delegate情况下获取jQuery绑定。

Answer 4

当您在页面中引入新的HTML代码时（例如，使用AJAX请求），先前设置的事件不会自动分配给新引入的DOM元素。 因此，即使您的新DOM元素的类属性设置为“voteUpBtn”，您的“.voteUpBtn”元素的单击事件也不存在。 您必须在AJAX请求的成功函数中再次将此事件添加到新引入的DOM元素中。

或者……您可以使用live（）函数“为当前和未来与当前选择器匹配的所有元素附加事件处理程序。” http://api.jquery.com/live/

或者……你可以使用delegate（）函数，它实际上更像是live（）的替代品。 它可以做几乎所有live（）可以做的事情，但它可以更有效率。

Answer 5

使用jquery.live绑定

http://api.jquery.com/live/

Answer 6

您可以使用live方法将事件附加到所有匹配元素，即使它们尚未在此时创建：

 $('.voteUpBtn').live('click', function(){ ... }); 

这样，当您加载ajax内容时，click事件将自动应用于新的.voteUpBtn 。

Answer 7

您可以使用live来“为现在和将来与当前选择器匹配的所有元素附加事件处理程序”：

http://api.jquery.com/live/

Answer 8

你应该使用’ live ‘方法，而不是’click’来将事件绑定到按钮。

$（’。voteUpBtn’）。live（’click’，function（）{//投票}