2

投稿のサムネイルをクリックすると投稿コンテンツを読み込むjquery関数があり、うまく機能します。しかし、2 回クリックすると、コンテンツが 2 回読み込まれます。

コンテンツの読み込みが完了したら、クリックをバインド解除して元に戻す必要があることをどこかで読みました。これが私の試みです。

event.preventDefault();2回目のクリックで（AJAXコンテンツではなく）完全なページをロードするため、非アクティブ化されたように見えます。

$("a.ajaxed").on("click",function(event) {
    event.preventDefault();
    var self = this,
   // ...; other variables
    $(self).unbind("click"); // code line added 1of2
    $("#streamwrapper").fadeOut(1000, function(){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: ajax_object.ajaxurl,
            data: ({
                action : "get_all_images",
                post_id: postid
                }),
            success:function(data){
                $("#board").append(postdiv);
                $("#post-container").append(data);
                postdiv.fadeIn(1000);
                $(self).bind("click"); // code line added 2of2
            },
            error:function(data){
                console.log(data);
            }
        });
    });
    return false;
});
4

2 に答える 2

3

私がいつもしていることは、 を使用して要素に「実行中」フラグを付けること$(this).dataです。この関数は、最初にこのフラグが設定されているかどうかを確認し、設定されている場合は戻り、そうでない場合はフラグを設定し、成功するとクリアします。以下はあなたが望むことをするはずです：

$("a.ajaxed").on("click",function(event) {
   // ...; other variables

   var self = this; // needed for $(self).removeData below

   if ($(self).data('executing')) // if we're executing, return
       return;

    $(self).data('executing', true); // set executing flag

    $("#streamwrapper").fadeOut(1000, function(){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: ajax_object.ajaxurl,
            data: ({
                action : "get_all_images",
                post_id: postid
                }),
            success:function(data){
                $("#board").append(postdiv);
                $("#post-container").append(data);
                postdiv.fadeIn(1000);

                $(self).removeData('executing'); // clear the executing flag
            },
            error:function(data){
                console.log(data);
            }
        });
    });
    return false;
});
于 2012-09-13T20:23:33.927 に答える
0

実際に beforeSend および complete イベントを使用して、イベントをバインドおよびアンバインドしてみることができます。これにより、Ajax が送信されるとすぐにボタンにイベントがないことが確認されます。

var clickEvent = 
    $("a.ajaxed").on("click",function(event) {
    var self = this,

    $("#streamwrapper").fadeOut(1000, function(){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: ajax_object.ajaxurl,
            data: ({
                action : "get_all_images",
                post_id: postid
                }),
            success:function(data){
                $("#board").append(postdiv);
                $("#post-container").append(data);
                postdiv.fadeIn(1000);
            },
            error:function(data){
                console.log(data);
            },
            beforeSend: function() {
            $(self).unbind("click"); // code line added 1of2
            }, 
            complete: function() {
                clickEvent();
            }
        });
    });
    return false;
});
于 2012-09-13T20:22:08.533 に答える