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.
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.
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.
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.
$() = 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.
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");
.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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With