单击后立即删除Click事件处理程序

Question

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 1

UPDATED

I was messing around with a couple of the things these other guys were suggesting and I think this is exactly what you need to accomplish this:

(function ($) {

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

            var selectFn = function() {
                toggle(true);
                return false;
            }

            var unselectFn = function() {
                toggle(false);
                return false;
            }    

            var toggle = function (state) {
                $('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
                if (state) {
                    $(document).off("click", '#wysiwyg-select-all,#wysiwyg-unselect-all', "**");
                    $(document).on("click", "#wysiwyg-unselect-all", unselectFn;
                }else{
                    $(document).off("click", '#wysiwyg-select-all,#wysiwyg-unselect-all', "**");
                    $(document).on("click", "#wysiwyg-select-all", selectFn;
                }
            };

            $(document).on("click", "#wysiwyg-select-all", selectFn);
            $(document).on("click", "#wysiwyg-unselect-all", unselectFn);

        }
    };

}(jQuery));

It toggles the binding of the buttons events and will work with dynamically created elements. This is a derivative of Matt Green's answer, but I noticed several problems with his, namely that he was calling the selectFn and unselectFn in his event binding rather than referencing them.

Answer 2

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

Answer 3

Something like this:

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

Answer 4

Add a class name to the click button and then remove the class once its clicked once.

$('#wysiwyg-select-all .myclassname').on('click', function(){
    toggle(true);
    $(this).removeClass('myclassname');
    $('#wysiwyg-unselect-all').addClass('secondclassname');
    return false;
});

$('#wysiwyg-unselect-all .secondclassname').on('click', function(){
    toggle(false);
    $('#wysiwyg-select-all').addClass('myclassname');
    $(this).removeClass('secondclassname');
    return false;
});

Answer 5

This should work for dynamically created elements:

(function ($) {

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

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

            $(document).on("click", "#wysiwyg-select-all", selectFn());
            $(document).on("click", "#wysiwyg-unselect-all", unselectFn());
        }
    };

}(jQuery));


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

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

Answer 6

Why don't you use any global variable as a flag. On click event set it true.

if (btn1Clicked)
     return;
btn1Clicked=true; 

And to reenable just set it false. You can use return false instead of return if required.