CODEWITHSUNDEEP
jquery
Realitätsverlust
Realitätsverlust

Reputation: 3953

Are there any disadvantages when using ".on"?

I hope this wasn't asked yet, i didn't find anything via google and I'm really curious. Yesterday i encountered an error. My code looked like this:

$(".button").click(function(){
    //Do something!
});

The problem was, that the class .button was loaded via AJAX later on, so the event did never fire. I solved it with this approach:

$("body").on("click", ".button", function() {
    //Do something!
});

So since yesterday, I'm thinking about what the advantages of the first approach are (except a few characters less). Is it a bad practice to attach all the handlers to the body and fire them only at specific elements? Or is there any reason why i should not use .on() the whole time which might break my code?

Upvotes: 5

Views: 165

Answers (3)

M I
M I

Reputation: 3682

.on can also work with dynamically added dom objects

In older versions of Jquery we were using .live, .bind or .click etc but now preferred is .on

read the detail here

http://api.jquery.com/on/

Difference between .on('click') vs .click()

Upvotes: 4

flowna
flowna

Reputation: 11

First of all, the difference between your two codes are, that you once bind the event directly to the button and once you bind it to the body element and delegate to any .buttom element within the body (does not matter, when the element ".button" is created).

There is no downside in using .on('event', 'selector', function(){}) since .click(function(){}) is an alias for .on('click', function(){}).

For latebindings you should checkout the .delegate function => http://api.jquery.com/delegate/ This binds the event to any element selected, now or in the feature. There's no real difference in using .on or .delegate in your case since .on is superseding the .delegate function. Nevertheless I prefere using .delegate as it's easier to see what I'm doing here and easier to maintain / understand the code in a few years.

$('body').delegate('.button', 'click', function() {
// Do something!
}

One last thing to mention, you should avoid binding everything to body, document, or what ever and delegate this to the given item. You should be as precise as possible with your bindings to avoid unwanted behaviours. You can maintain, extend and understand what's happening where, when you define areas in which you want thins to happen. Like using containers for your content and so on.

Upvotes: 0

Guffa
Guffa

Reputation: 700342

"Is it a bad practice to attach all the handlers to the body and fire them only at specific elements?"

Yes, it is bad practice to use delegates for every event. For each delegate that you add to the body, the selector will be evaluated every time that event happens anywhere in the page.

The preferred way to bind events is like in your first example (or doing the equivalent with the on method), as that will bind the event directly to the element. There is no selector that needs to be evaluated when the event happens.

Using delegates once in a while is a convenient way to handle situations like the one that you had, but if you start to get many delegates in the page you should consider binding them directly to the element instead.

Upvotes: 2

Related Questions