在触发事件后，如何暂时禁用 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()方法。它绑定只执行一次的处理程序。请参阅 jQuery 文档：http : //api.jquery.com/one
您要禁用单击事件侦听器多长时间？一种方法是使用 jQuery 的unbind http://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
});
}
});
});
编辑：为了安全起见，你也应该关心其他AJAX完成例程（只有三个：success，error，complete 看文档），或者active威力逗留假。
为什么不禁用按钮？您想单独禁用此侦听器的任何具体原因？BTB，从您的代码中，我看到您正在进行 ajax 调用。所以你特别想阻止用户直到电话回来？如果是，您可以尝试使用 jQuery 插件blockUI
我会设置一个全局变量来跟踪 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 调用。（我称之为“附加”解决方案）
您可以根据布尔值在点击中执行操作。单击它时，更改布尔值并在几秒钟后使用 setTimeout() 将其更改回来。这将有效地限制用户每几秒钟只点击一次按钮。
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
}
});