我目前在不同的页面中有几个操作按钮,每个按钮在单击时执行一些AJAX调用。换句话说,我在这些地方都有这样的代码: -
$("#searchButton")
.button()
.click(function() {
...
$.get(url, { data: ...}, function(data) { ... });
...
});
在进行一些测试之后,似乎在调用回调函数之前,某些AJAX调用至少要花费几秒钟来处理。
我的计划是在进行AJAX调用时禁用该按钮,并在完成AJAX调用时将其启用。这是为了防止用户在处理请求时多次单击该按钮。我找到的一个解决方案是使用unbind()
和bind()
函数。修改我的代码后,它现在看起来像这样: -
var searchButtonClickHandler = function() {
...
$.get(url, { data: ...}, function(data) { ... });
...
};
$("#searchButton")
.button()
.ajaxStart(function() {
$(this).button("disable").unbind("click");
})
.ajaxStop(function() {
$(this).button("enable").bind("click", searchButtonClickHandler);
})
.click(searchButtonClickHandler);
此代码工作正常。基本上,它在进行AJAX调用时删除了单击处理程序,并在AJAX调用完成时将单击处理程序加回。
我的问题是......是否可以概括按钮禁用/启用按钮,以便我不必在所有UI按钮上实现ajaxStart()
和ajaxStop
?
理想情况下,我想使用我之前的代码片段仅在按钮上注册click事件处理程序,然后使用.ui-button
选择器启用/禁用所有按钮,类似这样......
$(".ui-button")
.ajaxStart(function() {
$(this).button("disable").unbind("click");
})
.ajaxStop(function() {
// not sure how to bind the handler here
$(this).button("enable").bind("click", ?? );
});
...但是,这不起作用,我在这里绑定点击处理程序时遇到了麻烦。
我想的越多,似乎我需要创建一个按钮构建器功能来执行此操作,例如: -
var createButton = function(selectorName, clickHandler) {
$(selectorName)
.button()
.ajaxStart(function() {
$(this).button("disable").unbind("click");
})
.ajaxStop(function() {
$(this).button("enable").bind("click", clickHandler);
})
.click(clickHandler);
};
// create button like this
createButton("#searchButton", function() {
...
$.get(url, { data: ...}, function(data) { ... });
...
});
...但这种方法只会禁用/启用所选按钮,我想将其应用于所有UI按钮。
有人在禁用/启用页面中的所有按钮方面有更好的方法吗?
感谢。
答案 0 :(得分:5)
根据此answer的不同方法,您应该能够通过.data("events");
将它与样品放在一起应该如下所示:
$(".ui-button")
.ajaxStart(function() {
var events = $(this).data("events");
$(this).data("oldEvent", events.click[0]);
$(this).button("disable").unbind("click", events.click[0]);
})
.ajaxStop(function() {
var oldClick = $(this).data("oldEvent");
$(this).button("enable").bind("click", oldClick.handler);
});
不确定这是否完全有效,仍然在jsfiddle上乱搞。
<强>更新强>
这应该有效,例如jsfiddle。
答案 1 :(得分:0)
也许您可以使用delegate
将处理程序附加到按钮的父元素?这样,只有一个处理函数可以绑定/解除绑定。
答案 2 :(得分:0)
Yahoo托管了一个getElementByClass函数,您可以为所有UI按钮分配一个类“disableMe”。然后使用getElementByClass('disableMe')返回要禁用的所有元素的数组。
答案 3 :(得分:0)
你可以使用$('input[type=button]').attr('disabled','disable');
来禁用所有按钮,而不是将click事件绑定到解锁按钮...也可以使用deferred jquery对象,这里是example
答案 4 :(得分:0)
您可以使用
$("button").each(function(){
//your code here
});