jQuery - 如何在事件触发后临时禁用onclick事件侦听器？ [英] jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

问题描述

事件被触发后，如何临时禁用onclick事件侦听器（jQuery首选）？

示例：

用户单击按钮并触发下面的功能后，我想禁用onclick侦听器，因此不会对我的django视图发出相同的命令。

$ b $点击（function（）{
$（this）.attr（src，/ url / to / ajax- loader.gif）;
$ .ajax（{
type：GET，
url：/ url / to / django / view / to / remove / item /+ 。
dataType：json，
success：function（returned_data）{
$ .each（returned_data，function（i，item）{
// do stuff
}）;
}
}）;

，

Aldo

解决方案

有很多方法可以例如：

  $（。btnRemove）。 （）{
 var $ this = $（this）; 
 if（$ this.data（execution））return; 
 $ this 
 .data（execution，true）
 .attr（src，/url/to/ajax-loader.gif）; 
 $ .get（/ url / to / django / view / to / remove / item /+ this.id，function（returnedData）{
 // ...做你的东西... 
 $ this.removeData（execution）; 
}）; 
}）; 
  

或

  $（ btnRemove。）点击（处理）。 
 
函数处理程序（）{
 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）{
 // ...做你的东西... 
 $ this.click（handler）; 
}）; 
} 
  

我们还可以使用事件委托来获取更清晰的代码和更好的性能：

  $（document）.on（click，.btnRemove：not（.unclickable），function（）{$ b $ 
 .attr（src，/url/to/ajax-loader.gif）; 
 $ .get（/ url / to / django / view / to / remove / item /+ this.id，function（returnedData）{
 // ...做你的东西... 
 $ this.removeClass（unclickable）; 
}）; 
}）; 
  

如果我们不需要在执行后重新启用该处理程序，那么我们可以使用 .one（）方法。它绑定只被执行一次的处理程序。请参阅jQuery文档： http://api.jquery.com/one

How can I temporarily disable the onclick event listener, (jQuery preferred), after the event has been fired?

Example:

After the user clicks on the button and fires this function below, I want to disabled the onclick listener, therefore not firing the same command to 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                       
     });
   }
});

Thanks a lot,

Aldo

解决方案

There are a lot of ways to do it. For example:

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

or

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

We can also use event delegation for clearer code and better performance:

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

If we don't need to re-enable the handler after it has been executed, then we can use the .one() method. It binds handlers that are to be executed only once. See jQuery docs: http://api.jquery.com/one

这篇关于jQuery - 如何在事件触发后临时禁用onclick事件侦听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！