5

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?

Realitätsverlust
  • 3,941
  • 2
  • 22
  • 46
  • this may help http://stackoverflow.com/questions/16086785/is-there-an-advantage-to-using-jquerys-onmouseenter-function-over – Richlewis Sep 18 '14 at 07:00
  • Using `.on` or using *[Event Delegation](http://learn.jquery.com/events/event-delegation/)*? Please make the title and tags more precise. – user2864740 Sep 18 '14 at 07:02
  • relevant documentation: http://api.jquery.com/on/#direct-and-delegated-events says it's better than massive `.on`/`.off` – thriqon Sep 18 '14 at 07:02

3 Answers3

4

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

Community
  • 1
  • 1
Maz I
  • 3,664
  • 2
  • 23
  • 38
  • 2
    +1 that's exactly the main difference and you can also attach multiple events which is another advantage over the convience methods such as `click`, `change`, etc – Leo Sep 18 '14 at 07:04
  • 1
    I didn't find this thread earlier on! So it's probably a good idea to work with `.on()` the whole time since it only offers advantages. Thanks a lot! – Realitätsverlust Sep 18 '14 at 07:05
  • @YUNOWORK well, I guess it depends on what you want to achieve. I do find myself using a lot "shortcut" methods such as `click` when my only need is to bind a single event to an already existing element because...I don't know...I find the syntax easier to read and does help keep the code readable...more of a personal preference though – Leo Sep 18 '14 at 07:10
2

"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.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

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.

flowna
  • 11
  • 1