Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Jquery off().on() or just on()

Tags:

jquery

I know that we can attach events with the jQuery on() function and remove them again with off().

In an existing project I do sometimes come across code similar to this:

$("#SomeId").off("click").on("click"); 

or sometimes when using namespacing similar to this:

$("#SomeId").off("click.namespace").on("click.namespace");  

As far as I know you can only attach a single event to a specific namespace of the event.

For example if I simply do on("click") it will attach my specified function, overwriting the current function assigned, adding to the "click" event.

If I do on("click.namespace") it will attach my specified function overwriting the current function assigned, adding to the click.namespace.

What is the point removing any events by chaining an off("click") to the on("click) if on() already replaces any functions assigned to the specified event/event.namespace?

Is it redundant syntax in our code or is there a reason for it which I have missed?

Edit - Thank you kapa
I feel a bit silly now, I corrected my faulty knowledge above. Executing on("click.namespace1") several times I observed now that the data("events") object kept adding to the click event array.

I think that answers my own question there. That is why one would use off("event.namespace") to ensure nothing else is attached to that exact event/event.namespace.

like image 904
Jason Avatar asked Jun 11 '12 12:06

Jason


People also ask

What is the use of off in jQuery?

The off() Method in jQuery is used to remove event handlers attached with the on() method. The off() method brings a lot of consistency to the API and it replace unbind(), die() and undelegate() methods.

What is jQuery off method?

jQuery off() Method The off() method is most often used to remove event handlers attached with the on() method. As of jQuery version 1.7, the off() method is the new replacement for the unbind(), die() and undelegate() methods.

What is Offclick?

off('click'). on('click',function(){}); It will simply remove any previous event handler attached to the event and create a new one. Follow this answer to receive notifications.

What is $() in jQuery?

$() = window. jQuery() $()/jQuery() is a selector function that selects DOM elements. Most of the time you will need to start with $() function. It is advisable to use jQuery after DOM is loaded fully.


2 Answers

Actually you can attach multiple event handlers to the same event, not just one. Even when namespaces are used. Check out this quick demo.

Actually, one advantage of namespaces is that you can mark a group of event handlers, and easily remove them later to avoid attaching them several times. This is what this line does:

$("#SomeId").off("click.namespace").on("click.namespace");  
like image 97
kapa Avatar answered Oct 09 '22 04:10

kapa


You may want to try .one('click.namspace') instead of .on('click.namespace').

$('p')   .off('click.namespace', clickCB)   .one('click.namespace', clickCB); // note the .one() here 

This way you ensure that the click is not called more than once, otherwise, the .on(...) will only keep adding click-event-handlers (clickCBs) to the click.namespace event on p element and will be called multiple times before the .off() is triggered.

Good Luck...

like image 23
Aakash Avatar answered Oct 09 '22 04:10

Aakash