Are there any disadvantages to using ".on"?

Question

I hope that this has not yet been asked, I have not found anything through Google, and I'm really interested. Yesterday I ran into an error. My code looked like this:

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

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

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

So, from yesterday, I’m thinking about the benefits of the first approach (with the exception of a few characters less). Is it wrong to attach all handlers to the body and fire them only for certain elements? Or is there some reason why I shouldn't use .on() all the time, which might break my code?

Answer 1

.on can also work with dynamically added dom objects

In older versions of jQuery, we used .live, .bind or .click , etc., but now .on is preferred .on

read the details here

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

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

Answer 2

"Bad practice - attach all handlers to the body and fire them only in certain elements?"

Yes, it’s bad practice to use delegates for each event. For each delegate that you add to the body, the selector will be evaluated every time this event occurs anywhere on the page.

The preferred way to bind events is similar in the first example (or performs the equivalent using the on method), as this will bind the event directly to the element. There is no selector to evaluate when an event occurs.

Using delegates from time to time is a convenient way to handle situations like the ones you had, but if you start getting a lot of delegates on the page, you should consider binding them directly to the element.

Answer 3

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

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

For latebindings, you should check the .delegate => http://api.jquery.com/delegate/ function. This binds the event to any selected item, now or in the function. There is no real difference in using .on or .delegate in your case, since .on replaces the .delegate function. However, I prefer to use .delegate, as it is easier for me to see what I'm doing here, and easier to maintain / understand the code after a few years.

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

The last thing to mention is that you should avoid binding everything to the body, document, or what ever and delegate it to this element. You need to be as precise as possible with snaps to avoid unwanted behavior. You can support, expand and understand what happens where you define the areas in which you want them to take place. How to use containers for your content, etc.