我在这里遇到了一个小问题,我已经投入了相当多的时间,与它的功能相比,这个问题非常糟糕。
我的 DOM 中有标签,我已经使用 jQuery 将几个事件绑定(bind)到它们。
var a = $('<a>').click(data, function() { ... })
有时我想禁用其中一些元素,这意味着我向它添加一个 CSS 类“已禁用”并且我想删除所有事件,因此不再触发任何事件。我在这里创建了一个名为“Button”的类来解决这个问题
var button = new Button(a)
button.disable()
我可以使用 $.unbind 从 jQuery 对象中删除所有事件。但我也想拥有相反的功能
button.enable()
将所有事件与所有处理程序绑定(bind)回元素 要么 也许 jQuery 中有一个功能实际上知道如何做到这一点?!
我的按钮类看起来与此类似:
Button = function(obj) {
this.element = obj
this.events = null
this.enable = function() {
this.element.removeClass('disabled')
obj.data('events', this.events)
return this
}
this.disable = function() {
this.element.addClass('disabled')
this.events = obj.data('events')
return this
}
}
有什么想法吗?特别是此重新绑定(bind)功能必须在禁用后可用 -> 启用
var a = $('<a>').click(data, function() { ... })
我发现这些资源对我不起作用: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html
http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> 我没有在按钮类中设置事件
感谢您的帮助。
最佳答案
$("a").click(function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
返回false很重要。
或者您可以编写自己的启用和禁用函数来执行以下操作:
function enable(element, event, eventHandler) {
if(element.data()[event].eventHandler && !eventHandler) { //this is pseudo code to check for null and undefined, you should also perform type checking
element.bind(event, element.data()[event]);
}
else (!element.data()[event] && eventHandler) {
element.bind(event, element.data()[event]);
element.data({event: eventHandler}); //We save the event handler for future enable() calls
}
}
function disable(element, event) {
element.unbind().die();
}
这不是完美的代码,但我相信您已经了解了基本概念。调用启用时从元素 DOM 数据恢复旧的事件处理程序。缺点是您必须使用 enable() 添加任何可能需要 disable() d 的事件监听器。否则,事件处理程序将不会保存在 DOM 数据中,并且无法再次使用 enable() 恢复。目前,没有万无一失的方法来获取元素上所有事件监听器的列表;这将使工作变得容易得多。
关于javascript - 使用 JS/jQuery 启用/禁用 DOM 元素的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8249641/