javascript - 删除类不会禁用与已删除类关联的事件监听器函数

Question

我对做了一个 fiddle demonstrate 我的问题。

我在关闭类激活的功能时遇到问题，有什么想法吗？

$(document).ready(function(){

  $('.changeText').click(function(){
    $(this).html( $(this).html() == 'Test' ? 'Changed' : 'Test' );
  });

  $('.changeBG').click(function(){
    $(this).css('background-color', 'red');
  });

  /* in some cases I need to turn off changeBG function */

  $('.changeBG').removeClass('changeBG');
  // but if you click the div it still turns into red.

});

提前致谢。

Answer 1

你可以 delegate the event handler一个共同的祖先。

在这样做时，只有当该元素具有该特定类时它才会起作用，因为在实际触发 click 事件时(而不是在附加事件处理程序时)进行检查。

Example Here

$(document).on('click', '.changeBG', function(){
    $(this).css('background-color', 'red');
});

在上面的例子中，document 是共同的祖先。根据您的标记，您可能希望将其更改为最接近的、恒定的祖先元素，这样就不会在您每次单击 document 时触发该事件。

---

或者，您也可以使用 .off() 方法，并使用 event namespaces 删除该特定事件处理程序.

您可以附加一个名为 click.changeBG 的特定 click 事件:

$('.changeBG').on('click.changeBG', function(){
    $(this).css('background-color', 'red');
});

然后使用 .off('click.changeBG') 删除该特定事件:

Example Here

$('.changeBG').removeClass('changeBG').off('click.changeBG');