触发事件后,如何临时禁用onclick事件监听器(首选jQuery)?
例:
用户单击按钮并在下面触发此功能后,我想禁用onclick侦听器,因此不向django视图触发相同的命令。
$(".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 }); } });
非常感谢,
奥尔多
有很多方法可以做到这一点。例如:
$(".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()