3

所以我已经为此工作了一段时间，但我似乎仍然无法弄清楚。

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

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

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

但是当用户点击显示更多并将这些元素添加到 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);
}
4

1 回答 1

3

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

$("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/

于 2013-02-07T01:15:21.467 回答