如何在事件触发后暂时禁用 onclick 事件监听器(首选 jQuery)?
例子:
在用户点击按钮并触发下面的这个函数后,我想禁用 onclick 监听器,因此不会向我的 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
});
}
});
非常感谢,
奥尔多
最佳答案
有很多方法可以做到这一点。例如:
$(".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);
});
}
我们还可以使用事件委托(delegate)来获得更清晰的代码和更好的性能:
$(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()
方法。它绑定(bind)只执行一次的处理程序。请参阅 jQuery 文档:http://api.jquery.com/one
关于javascript - jQuery - 如何在事件触发后暂时禁用 onclick 事件监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1921855/