在事件触发后，我如何暂时禁用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
});
}
});
非常感谢，
Aldo
有很多方法可以实现。例如：
$(".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
.on("click", ".btmRemove:not([disabled])"是另一个选项。 - AaronLS你想要禁用点击事件监听器的时间有多长？一种方法是使用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可能会保持不变。
active 保持为 false 直到 ajax 请求成功完成。在此期间，点击处理程序立即在开头返回，因此基本上不会执行。 - RamboNo5if (!active)。我会更新答案。 - RamboNo5var 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
}
});
我会使用一个类，例如'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');
});
};
}
});
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);
我建议在Ajax完成例程（成功或失败，记住）中禁用按钮，然后重新启用它。如果您担心浏览器不尊重您禁用按钮，您可以在按钮上备份自己的标志（例如，使用data-前缀设置名为data-disabled的属性，以符合良好实践并与HTML5兼容）。但是，除非实际遇到浏览器未禁用按钮的问题，否则我可能认为这已经足够好了。
你也可以隐藏按钮（或包含的 div 元素）
$(".btnRemove").click(function() {
$(this).hide();
// your code here...
})
如果需要再次显示，您可以直接调用.show()。
另外，根据您的用例，您应该考虑使用加载覆盖。