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;
       });
    });

しかし、それはうまくいかないようで、投票するたびに 1 票ではなく 2 票が合計に追加されるシナリオも作成されます。

助けてくれてありがとう。

このコードは 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を使用すると、これを非常に簡単に行うことができます。このメソッドを使用することもできますが、jQueryのすべてのイベント操作を処理するメソッドであるメソッドをdelegate()使用することをお勧めします。on()、などの他のものはclick()、の単なるエイリアスですmouseover()bind()on()

とにかく、イベントを委任するには、イベントがアタッチする親のセレクターと、実際に関心のある要素のセレクターを指定する必要があります。そのため、コード行は次のようになります。

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

本当に体以外のものを使うべきですが、これはほんの一例です。

さらに読む：http ：//api.jquery.com/on/

于 2013-02-07T01:15:21.467 に答える