Javascript Can'；t将脚本绑定到DOM中的新元素

所以我已经研究了一段时间了，但我似乎还没弄明白

我这里有一页：

底部的“显示更多”按钮使用以下脚本调用页面上的额外帖子：

$("a.view-more").bind('click',function(event){
        event.preventDefault();
        if($('.post-holder').hasClass('ingredients')) { posttype = 'ingredient'; }
        if($('.post-holder').hasClass('recipe')) { posttype = 'recipe'; }
        if($('.post-holder').hasClass('cmed')) { posttype = 'cmed'; }
        filter = 'none';
        morePosts(posttype,filter);
});

让人们投票的选项与此相关：

$.post('http://taste.fourseasons.com/wp-admin/admin-ajax.php', data,
           function(response){
                   if(response!="-1") {
                           el.find('.vote-sm').removeClass('vote-sm').addClass('unvote-sm');
                           el.find('.vote-text').html("VOTED");
                           el.unbind("click");
                           if(response!="null") {
                                   el.find(".vote-count").html(response);
                           }
                           var cookie = getCookie("better_votes_"+postID);
                           if(!cookie) {
                                   var newcookie = postID;
                           } else {
                                   var newcookie = postID;
                           }
                           setCookie("better_votes_"+postID, newcookie, 365);
                   } else {
                   }
           });
           return false;
   });

但是，当用户单击ShowMore并将这些元素添加到DOM中时，投票选项无法处理这些新元素。我想我可以把它们加在一起：

$("a.view-more").bind('click',function(event){
        event.preventDefault();
        if($('.post-holder').hasClass('ingredients')) { posttype = 'ingredient'; }
        if($('.post-holder').hasClass('recipe')) { posttype = 'recipe'; }
        if($('.post-holder').hasClass('cmed')) { posttype = 'cmed'; }
        filter = 'none';
        morePosts(posttype,filter);

        $(".vote").bind('click',function(event) {
               event.preventDefault();
               postID = $(this).attr('data-post');
               var el = $(this);
               //el.html('<span id="loader"></span>');
               var nonce = $("input#voting_nonce_"+postID).val();
               var data = {
                       action: 'add_votes_options',
                       nonce: nonce,
                       postid: postID,
                       ip: '66.252.149.82'                        
               };
               $.post('http://taste.fourseasons.com/wp-admin/admin-ajax.php', data,
               function(response){
                       if(response!="-1") {
                               el.find('.vote-sm').removeClass('vote-sm').addClass('unvote-sm');
                               el.find('.vote-text').html("VOTED");
                               el.unbind("click");
                               if(response!="null") {
                                       el.find(".vote-count").html(response);
                               }
                               var cookie = getCookie("better_votes_"+postID);
                               if(!cookie) {
                                       var newcookie = postID;
                               } else {
                                       var newcookie = postID;
                               }
                               setCookie("better_votes_"+postID, newcookie, 365);
                       } else {
                       }
               });
               return false;
       });
    });

---

您在事件绑定方面遇到了一个相当常见的问题

$("a.view-more").bind('click',function(event){

您编写的上述代码行将事件侦听器附加到当时可用的DOM元素。这就是添加到DOM中的新元素不响应事件的原因；因为他们没有附加事件侦听器

为了解决这个问题，我们可以使用事件委托。这是通过将事件附加到要侦听事件的DOM元素的父元素来实现的。然后，我们可以确定当事件最终传播到父级时事件开始于哪个子级

jQuery使这一点非常容易做到。您可以使用

delegate（）

方法，但我建议您使用

on（）

方法，它是处理jQuery中所有事件操作的方法。其他如

click（）

、

mouseover（）

和

bind（）

只是

on（）的别名

无论如何，要委派事件，我们需要为事件将附加到的父级指定一个选择器，并为我们实际感兴趣的元素指定一个选择器。这行代码现在看起来像这样：

$("body").on('click', "a.view-more", function(event){

你真的应该使用身体以外的东西，但这只是一个例子

进一步阅读：
谢谢@Ryan不幸的是，这似乎不起作用，但也许我没有正确地执行它。将视图行“更多”脚本更改为您建议的内容并没有任何区别。通过使用delegate（）方法，它实际上禁用了它。@EricBrockman首先，你有任何javascript错误吗？你使用的是什么版本的jQuery？我使用的是1.8.0作为错误，我不确定，我想我应该将主js文件放入jslint或其他东西中。通过在浏览器中打开控制台，你可以看到javascript错误。如果您使用的是Chrome，请按ctrl+shift+i打开开发者工具，然后单击控制台选项卡。我已经浏览了网站。“展示更多”现在已经成功了一半。它向服务器发出ajax请求以获取更多内容。但当它加载第二批内容时，服务器发送的只是一些javascript。您不需要在每个ajax请求中获取和加载相同的javascript。然而，这涉及到了一个完全不同于当前的问题。
$("body").on('click', "a.view-more", function(event){