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

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"在这种情况下)并没有立即运行.在某些情况下,这些性能差异可能会很明显,例如包含许多行的表或包含许多项的列表.