JQuery binds to many elements (on) unbind from a specific element (off)

Question

My goal is to bind to many elements on the page (using the on () function), and then unbind to a specific element (using off ()) after clicking it.

$(document).on({ mouseenter: enter, mouseleave: leave, mousedown: down, mouseup: up, click: click }, ".up_side .thumbsUp"); 

The on () function works well, but I cannot figure out how to use off () to unpin from a clicked element.

 var click = function() { var thumbsUp = $(this); var successCallback = function(data) { // This is where I need to unbind the clicked element $(thumbsUp).off({ mouseenter: enter, mouseleave: leave }); } $(this).castVote(direction, modelName, modelId, successCallback, errorCallback); } 

Thanks!!!

---

Decision

Use .data () to save the flag and check the flag before executing the code. This seems like a workaround and makes the code more fragile. If someone finds a better way, send it back. Thanks!

  $(document).on({ mouseenter: function(){ if ($(this).data("submitted") != true) { $(this).css("cursor", "pointer"); $(this).css("backgroundPosition", "-48px"); } }, mouseleave: function(){ if ($(this).data("submitted") != true) { $(this).css("backgroundPosition", "0px"); } }, mousedown: function() { if ($(this).data("submitted") != true) { $(this).css("backgroundPosition", "-96px"); } }, mouseup: function() { if ($(this).data("submitted") != true) { $(this).css("backgroundPosition", "0px"); } }, click: function() { if ($(this).data("submitted") != true) { var thumbsUp = $(this); var ballotBox = $(thumbsUp).parent(); var votingStation = $(ballotBox).parent(); //ballotBox.hide(0, "", function() { var direction = $(thumbsUp).dataset("direction"); var modelName = $(votingStation).dataset("modelName"); var modelId = $(votingStation).dataset("modelId"); var successCallback = function(data) { $(thumbsUp).css("backgroundPosition", "-144px"); // Add flag to indicate successful vote thumbsUp.data("submitted", true) $(this).vote_up_side('animateBallotBox', data, ballotBox, thumbsUp); } var errorCallback = function(XMLHttpRequest, textStatus, errorThrown) { $(this).vote_up_side('animateError', ballotBox); } $(this).castVote(direction, modelName, modelId, successCallback, errorCallback); } } }, ".up_side .thumbsUp"); 

Answer 1

.off() documentation says:

selector A selector that must match the first one passed to .on() when attaching event handlers.

and (my emphasis)

To remove specific delegated event handlers, specify a selector argument. The selector string must exactly match the one that was passed to .on() when the event handler was attached.

Therefore, it is impossible for AFAIK to selectively (without a pun) remove some elements from the delegated event handler.

I think your only option is to leave the event handler in place, but tag each element with the .data() that you use to indicate whether that particular element has already been clicked.

Answer 2

Could you use ".one ()"?

In the docs: "To remove events related to .on (), see..off (). To attach an event that runs only once and then deletes itself, see the .one () section."

http://api.jquery.com/one/

Answer 3

Actually, this does not make sense. When off() called WITHOUT a selector, all specified events are deleted in accordance with official jQuery docs. Therefore, $(".someElement").off("click") should detach ALL click handlers from ".someElement" , regardless of whether the original binding was direct or delegated. If it does not work, then jQuery has an error, and you must provide an error report.

The way you do this with data() will definitely work, but I personally find it unnecessary kludge / hack.