Question

所以我已经做了一段时间了，但我似乎还是无法弄明白。

我在这里有一个页面：http://taste.fourseasons.com/ingredients/

底部的show more按钮使用以下脚本将额外的帖子调到页面上：

$("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;
   });

但是当用户点击show more并将这些元素添加到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;
       });
    });

但这似乎不起作用，并且每次投票时都会创建一个为总和而不是一个增加两票的方案。

感谢您的帮助。

此代码来自wp-function页面：

function add_votes_options() {
    $postid = $_POST['postid'];
    $ip = $_POST['ip'];

    if (!wp_verify_nonce($_POST['nonce'], 'voting_nonce_'.$postid))
        return;

    $voter_ips = get_post_meta($postid, "voter_ips", true);
    if(!empty($voter_ips) && in_array($ip, $voter_ips)) {
        echo "null";
        die(0);
    } else {
        $voter_ips[] = $ip;
        update_post_meta($postid, "voter_ips", $voter_ips);
    }   

    $current_votes = get_post_meta($postid, "votes", true);
    $new_votes = intval($current_votes) + 1;
    update_post_meta($postid, "votes", $new_votes);
    $return = $new_votes>1 ? $new_votes : $new_votes;
    echo $return;
    die(0);
}

Answer 1

你遇到了一个相当常见的事件绑定问题。

$("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){

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

进一步阅读：http://api.jquery.com/on/

无法将脚本绑定到DOM中的新元素

1 个答案: