Question

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

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

<script type="text/javascript">
$(function()    {
         $('.voteUpBtn').click(function() {
               // Cast your vote
          }
     }
</script>

现在，当用户提交新注释时，它会进行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
});

原始答案

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

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

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

Answer 3

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

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

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

Answer 4

使用delegate代替live（如果您可以使用jQuery＆gt; 1.4），因为它是more efficient。

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

Answer 5

使用jquery.live绑定

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

<script type="text/javascript">
$(function()    {
         $('.voteUpBtn').live("click, "function() {
               // Cast your vote
          }
     }
</script>

Answer 6

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

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

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

Answer 7

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

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

Answer 8

您应该使用“live”方法，而不是“点击”将事件绑定到按钮。

$（'。voteUpBtn'）。live（'click'，function（）{ // 投你的票 }

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

8 个答案: