I did a fiddle to demonstrate my problem.

I am having problem to turn off a function activated by a class, any ideas?

$(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.

});

Thanks in advance.

I did a fiddle to demonstrate my problem.

I am having problem to turn off a function activated by a class, any ideas?

$(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.

});

Thanks in advance.

• javascript
• jquery

• 1 You should delegate event to process selector on the fly – A. Wolff Commented Dec 11, 2015 at 13:55

3 Answers 3

You could delegate the event handler to a mon ancestor.

In doing so, it will only work if that element has that specific class because a check is made when the click event is actually fired (rather than when the event handler is attached).

Example Here

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

In the example above, document is the mon ancestor. Depending on your markup, you will probably want to change that to the closest, constant, ancestor element so that the event isn't fired every time you click on the document.

Alternatively, you could also use the .off() method, and remove that specific event handler by utilizing event namespaces.

You can attach a specific click event named click.changeBG:

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

Then remove that specific event using .off('click.changeBG'):

Example Here

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

You need to remove the handler directly:

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

Note: off is jQuery 1.7+, otherwise use unbind.

What happens is that the line $('.changeText').click(... attaches an handler to all elements with class changeText. Removing the class does not remove the handler.

This is because the handler is attached to the element and not the class. The class you referred while attaching is just a filter. You have just changed the class. Not the event that is associated with it:

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

Or, when you click check for the class:

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