web-dev-qa-db-ja.com

jQuery-イベントが発生した後、onclickイベントリスナーを一時的に無効にするにはどうすればよいですか？

イベントが発生した後、onclickイベントリスナー（jQueryを推奨）を一時的に無効にするにはどうすればよいですか？

例：

ユーザーがボタンをクリックして以下のこの関数を実行した後、onclickリスナーを無効にして、同じコマンドをmy Django view。

$(".btnRemove").click(function(){
   $(this).attr("src", "/url/to/ajax-loader.gif");
   $.ajax({
        type: "GET",
        url: "/url/to/Django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data){
            $.each(returned_data, function(i, item){
              // do stuff                       
     });
   }
});

どうもありがとう、

アルド

javascriptjqueryajaxeventsonclick
37
aldux

それを行うには多くの方法があります。例えば：

_$(".btnRemove").click(function() {
    var $this = $(this);
    if ($this.data("executing")) return;
    $this
        .data("executing", true)
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/Django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeData("executing");
    });
});
_

または

_$(".btnRemove").click(handler);

function handler() {
    var $this = $(this)
        .off("click", handler)
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/Django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.click(handler);
    });
}
_

イベントの委任を使用して、コードをより明確にし、パフォーマンスを向上させることもできます。

_$(document).on("click", ".btnRemove:not(.unclickable)", function() {
    var $this = $(this)
        .addClass("unclickable")
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/Django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeClass("unclickable");
    });
});
_

ハンドラーの実行後にハンドラーを再度有効にする必要がない場合は、.one()メソッドを使用できます。一度だけ実行されるハンドラーをバインドします。 jQueryのドキュメントを参照してください： http://api.jquery.com/one

66
thorn̈

どのくらいの期間、クリックイベントリスナーを無効にしますか？ 1つの方法は、jQueryのunbindhttp://docs.jquery.com/Events/unbind を使用してイベントリスナーのバインドを解除することです。

ただし、後で再バインドするためだけにイベントのバインドを解除しないことをお勧めします。代わりにブール値を使用してください。

var active = true;
$(".btnRemove").click(function() {
    if (!active) {
        return;
    }
    active = false;
    $(this).attr("src", "/url/to/ajax-loader.gif");
    $.ajax({
        type: "GET",
        url: "/url/to/Django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data) {
            active = true; // activate it again !
            $.each(returned_data, function(i, item) {
                // do stuff                       
            });
        }
    });
});

edit：安全にするために、他のajax完了ルーチンにも注意する必要があります（success、error、completeドキュメントを参照 ）またはactiveはfalseのままになる場合があります。

19
RamboNo5

ボタンを無効にしないのはなぜですか？このリスナーを単独で無効にする特定の理由は何ですか？ BTB、あなたのコードから、私はあなたがajax呼び出しをしていることがわかります。 SO呼び出しが戻るまでユーザーをブロックしたいですか？はいの場合、jQueryプラグイン blockUI を試すことができます

5
ram

AJAXリクエストを追跡するグローバル変数を設定します...

var myApp = {
  ajax: null
}

そして、同時リクエストを止めるためにこのちょっとした魔法を使います...

// Fired when an AJAX request begins
$.ajaxStart(function() { myApp.ajax = 1 });

// Fired when an AJAX request completes
$.ajaxComplete(function() { myApp.ajax = null });

// Fired before an AJAX request begins
$.ajaxSend(function(e, xhr, opt) {
  if(myApp.ajax != null) {
    alert("A request is currently processing. Please wait.");
    xhr.abort();
  }
});

このアプローチを使用すると、コードをもう一度調べて、AJAXの呼び出しを1つ1つ変更する必要はありません。

3
Josh Stodola

たとえば、「ajax-running」などのクラスを使用します。クリックされた要素に「ajax-running」クラスがない場合にのみ、クリックイベントが実行されます。 ajax呼び出しが終了するとすぐに、「ajax-running」クラスを削除して、再度クリックできるようにします。

$(".btnRemove").click(function(){
    var $button         = $(this);
    var is_ajaxRunning  = $button.hasClass('ajax-running');
    if( !is_ajaxRunning ){
        $.ajax({
            ...
            success: function(returned_data) {
                ...
                $button.removeClass('ajax-running');
            });
        };
    }   
});
2
Mariano Cavallo

ブール値に基づいて、クリック内でアクションを実行できます。クリックしたら、ブール値を変更し、setTimeout（）を使用して数秒後に元に戻します。これにより、ユーザーはボタンを数秒に1回しかクリックできなくなります。

var isEnabled = true;

$("a.clickMe").click(function(e){
  e.preventDefault();
  if (isEnabled == true) {
    isEnabled = false; // disable future clicks for now
    do_Something();
    setTimeout(function(){
      isEnabled = true;
    }, 3000); // restore functionality after 3 seconds
  }
});
2
Sampson
var ajaxAction = function() {
    var ele = $(this);
    ele.unbind("click", ajaxAction);
    ele.attr("src", "/url/to/ajax-loader.gif");
    $.ajax({
        type: "GET",
        url: "/url/to/Django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data) {
            $.each(returned_data, function(i, item) {
            });
        },
        complete: function() {
            ele.bind("click", ajaxAction);
        }
    });
}
$(".btnRemove").click(ajaxAction);
1
jitter

Ajax経由で投稿する場合、クリック時にボタンを無効にし、プロセスの完了後に有効にすることができます。ただし、ポストバックしている場合は、ボタンを無効にすることはできません。ボタンを無効にすると、サーバー側のクリックイベントが発生しなくなります。そのため、クリック時にボタンを非表示にし、ユーザーにわかりやすいメッセージを表示するだけです。 ポストバックでasp.netボタンを無効にする方法 の投稿が役立ちます。

1
sangam

ボタンを無効にしてから、Ajax完了ルーチンで再度有効にすることをお勧めします（成功または失敗、覚えておいてください）。ブラウザがボタンの無効化を尊重していないことが心配な場合は、ボタンに独自のフラグを付けてバックアップできます（たとえば、data-disabledという名前の属性を設定し、data-プレフィックスを使用することをお勧めします） HTML5と互換性があります）。しかし、ボタンを無効にしないブラウザで実際に問題が発生しない限り、おそらくそれで十分だと思います。

1
T.J. Crowder

また、ボタン（または含むdiv）を非表示にすることもできます

$(".btnRemove").click(function() {
   $(this).hide();
   // your code here...
})

再度表示する必要がある場合は、単に.show（）を呼び出すことができます。

また、ユースケースに応じて、代わりに読み込みオーバーレイの使用を検討する必要があります

0
jules345