Question

我对 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的特定click.changeBG事件：

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

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

Example Here

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

Answer 2

您需要直接删除处理程序：

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

注意：off是jQuery 1.7+，否则使用unbind。

行$('.changeText').click(...将处理程序附加到具有类changeText的所有元素。删除类不会删除处理程序。

Answer 3

这是因为处理程序附加到元素而不是类。您在附加时引用的类只是一个过滤器。你刚刚改变了课程。不是与之相关的事件：

// Do this
$('.changeBG').removeClass('.changeBG').off("click");

或者，当您点击检查班级时：

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

删除类不会禁用与删除的类关联的事件侦听器功能

3 个答案: