Question

我遇到了一个小问题，与其功能相比，我已经花费了相当多的时间。

我的DOM中有标签，我用jQuery绑定了几个事件。

var a = $('<a>').click(data, function() { ... })

有时我想禁用其中的一些元素，这意味着我将CSS-Class'禁用'添加到它中，我想删除所有事件，因此根本不会触发任何事件。我在这里创建了一个名为“Button”的类来解决这个问题

var button = new Button(a)
button.disable()

我可以使用$ .unbind从jQuery对象中删除所有事件。但我也希望有相反的功能

button.enable()

将所有事件与所有处理程序绑定回元素要么也许jQuery中有一个功能实际上是如何做到的？！

My Button Class看起来与此类似：

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
  }
}

有什么想法吗？特别是此重新绑定功能必须在禁用后可用 - ＆gt;使

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 - ＆GT;我没有在按钮类

中设置事件

感谢您的帮助。

Answer 1

$("a").click(function(event) {
    event.preventDefault(); 
    event.stopPropagation(); 
    return 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();
}

这不是完美的代码，但我确信你已经掌握了基本的想法。调用enable时，从元素DOM数据中恢复旧的事件处理程序。缺点是你必须使用enable（）来添加任何可能需要禁用的事件监听器（）d。否则，事件处理程序不会保存在DOM数据中，并且无法再次使用enable（）进行恢复。目前，没有万无一失的方法来获取元素上所有事件监听器的列表;这将使工作变得更容易。

Answer 2

我会采用不同的方法继续：

<a id="link1">Test function</a>
<a id="link2">Disable/enable function</a>

<script type="text/javascript">
  $(function() {
      // this needs to be placed before function you want to control with disabled flag
      $("#link1").click(function(event) {
          console.log("Fired event 1");
          if ($(this).hasClass('disabled')) {
              event.stopImmediatePropagation();
          }
      });

      $("#link1").click(function() {
          console.log("Fired event 2");
      });

      $("#link2").click(function() {
          $("#link1").toggleClass("disabled");
      });
  });
</script>

这可能不是您所需要的，因为它可能会影响以后绑定到此事件中的其他功能。替代方案可能是将函数本身修改为更像：

$("#link1").click(function(event) {
    console.log("Fired event 1");
    if ($(this).hasClass('disabled')) {
       return;
    }

    // do something here
});

如果这是一个选项。

Answer 3

您应该使用事件委派，而不是分别向每个元素添加事件处理程序。它会使结构更易于管理。

这就是为什么你可以检查点击元素上的类，并采取相应的行动。而且你甚至可以通过改变标签的类来重新使用它们。

P.S。仔细阅读链接，以便稍后向其他人解释。事件授权是一项非常重要的技术。

Answer 4

您可以使用<input type="button">，然后使用$("#buttonID").addAttr('disabled', 'disabled');和$("#buttonID").removeAttr('disabled');。禁用和启用将由浏览器处理。如果你需要，你仍然可以通过删除按钮的背景和边框来重新设置它看起来像一个锚点。但请注意，在某些浏览器中，某些边距和填充可能仍会让您感到烦恼。

使用JS / jQuery启用/禁用DOM元素的事件

4 个答案: