Remove click event handler immediately after click

I’ve been trying to remove the click event handler after being clicked once to prevent the event from firing multiple times.

I’ve tried .unbind(), .off(), .one() and put each in various different places in the function, but none seem to work.

If I use .off() I get a undefined is not a function error.

If I use .one() I want to basically turn the event back on if I click the other button. So if I click on select, I want it to only fire once, but if I then click on unselect, I want select to be clickable again.

I’ve tried doing the following, but oddly the code doesn’t even fire, and so I’ve been forced to use click().

$().on('click', function()...

Which function should I use and where should I put it?

(function($) {

Drupal.behaviors.wysiwyg = {
    attach: function(context, settings) {

        var toggle = function(state) {
            $('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
        }

        $('#wysiwyg-select-all').click(function(){
    toggle(true);
            return false;
        });

        $('#wysiwyg-unselect-all').click(function(){
    toggle(false);
            return false;
        });
    }
}

}(jQuery))

Answer

Check if this works for you. Also make sure the jquery version is above 1.7 for “on”, “off” to work.

(function($) {

  Drupal.behaviors.wysiwyg = {
    attach: function(context, settings) {
    var counter = 0;
      var toggle = function(state) {
        $('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
      }

      $(document).off('click',"#wysiwyg-select-all").on('click', "#wysiwyg-select-all", function(e) {
        toggle(true);               
        return false;
      });

      $(document).off('click',"#wysiwyg-unselect-all").on('click', "#wysiwyg-unselect-all", function(e) {
        toggle(false);      
        return false;
      });
    }
  }

}(jQuery))