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

我有一个页面，其中有帖子和用户给予评论。评论是使用AJAX处理的。每条评论栏都有一个“投票”按钮。如何在由AJAX返回的HTML中调用jQuery函数

在索引页，我已经把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中工作？

来源

2011-03-02 ptamzz

使用live而不是click：

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

来源

2011-03-02 14:46:17 Emmett

如果我没有事件，或者事件处于页面加载状态，该怎么办。我有''（'＃newline'）。elastic（）;'，现在我希望它在将来也可以应用于所有选择器。我如何改变语法？ – ptamzz 2011-03-15 06:20:28

使用jquery.live结合

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

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

来源

2011-03-02 14:45:03 Amitabh

可以使用live方法将一个事件附加到所有匹配的元素，即使他们没有在该位置创建：

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

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

来源

2011-03-02 14:45:35

您可以使用live到“附加处理器为当前选择，满足其所有元素的事件，现在和未来”：

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

来源

2011-03-02 14:45:57 soju

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

$（ 'voteUpBtn '）。住（' 点击'，函数（）{// 社区一票 }

来源

2011-03-02 14:46:40 Scalar

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

或者...您可以使用live（）函数“将处理程序附加到该事件对于当前选择现在和将来匹配这，所有的元素。” http://api.jquery.com/live/

或者......你可以使用委托（）函数，它其实更像是活（）的替代。它可以做几乎所有live（）可以做的事情，但它可以更有效一些。

来源

2011-03-02 14:47:27 BMiner

使用delegate而不是live（如果您可以使用jQuery> 1.4），因为它是more efficient。

在原始绑定上没有live或delegate，动态添加的元素不会拾取jQuery绑定。

来源

2011-03-02 14:48:56 andyb

更新

这是一个古老的答案。从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”）而非立即运行。有些情况下，这些性能差异可能会引起注意，例如具有多行的表格或具有多个项目的列表。

来源

2011-03-02 14:51:36

关于代表（）的有趣点。我同意...应该更有效率。我将不得不开始使用该功能。谢谢！ – BMiner 2011-05-13 18:49:17

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

回答

相关问题