Using on() to attach an event handler to an element that will be dynamically created

Question

I'm having trouble with on(), since live() is deprecated.

This doesn't seem to work:

$('body').on("click", ".myButton", console.log("clicked"));

When I refresh the page, the console immediately says "clicked" even though I haven't clicked anything, but does not fire when I actually click on it.

Also, it would seem more performant to apply this to the DIV the button is in, rather than the huge scope of BODY. Is this true?

It doesn't work because you are executing `console.log("clicked")` immediately. You would get the same problem with `.live()`. Pass a function reference and you will be fine. And yeah, you should always bind the event handler as close to the actual element as possible. It's not about the scope, it's about the length of the descendent chain, so to speak. — Felix Kling, Apr 15 '12 at 17:47
possible duplicate of [Why does click event handler fire immediately upon page load?](http://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load) — Felix Kling, Apr 15 '12 at 17:50
@FelixKling, That question is about when it fires, mine was about where and why. The console.log() needed to be within a function, not just there by itself. — SpaceNinja, Apr 15 '12 at 17:56
*mine was about where and why*: Correct me if I'm wrong but the question is *"**Why** does click event handler fire immediately upon page load?"* and the accepted answer perfectly describes what you should do and that's what the other answers here suggest as well, just with less information. You should only ask one question per question anyway. — Felix Kling, Apr 15 '12 at 17:59
My apologies. The moderators may delete this question if there is no purpose. — SpaceNinja, Apr 15 '12 at 18:01

score 3 · Answer 1 · answered Apr 15 '12 at 17:45

3

$(function(){
    $('body').on("click", ".myButton",function(){
       alert("clicked");
    });
});

answered Apr 15 '12 at 17:45

Shyju

214,206
104
411
497

score 2 · Answer 2 · answered Apr 15 '12 at 17:44

2

The strange behaviour you're seeing is because you are actually calling console.log yourself on that line. You should wrap it in a function.

function () { console.log('clicked'); }

answered Apr 15 '12 at 17:44

nickf

537,072
198
649
721

As of jQuery 1.7, .delegate() has been superseded by the .on() method. – T. Junghans Apr 15 '12 at 17:46
Ah, I'm understanding on() much better now. Than you, NickF! – SpaceNinja Apr 15 '12 at 17:59

score 2 · Accepted Answer · answered Apr 15 '12 at 17:45

2

$('body').on("click", ".myButton", function() {
     console.log("clicked")
});

answered Apr 15 '12 at 17:45

thecodeparadox

86,271
21
138
164

Thanks so much! Just wrap it in a function so it doesn't call immediately. – SpaceNinja Apr 15 '12 at 18:00

score 2 · Answer 4 · answered Apr 15 '12 at 17:55

The first part of your question has been adequately answered by other answers. You were calling your console.log() function rather than passing a reference to a function that can be called later.

To answer the second part of your question which nobody else has yet addressed:

Yes, it will perform better to scope your event handler to a closer ancestor of the button rather than use $('body').

You should pick an ancestor of your buttons that is as close to the buttons as possible, but is statically present at the time you install your event handler (and not dynamically destroyed/created later).

One main reason that .live() was deprecated in favor of .on() is that .live() put all it's event handlers on the document object and in a busy page, there can be a LOT of delegated event handlers on the document object. When that occurs, ever single event bubbles all the way up to the document object and then every single event has to be compared to a long list of possible delegated event handlers. Since this usually means running a selector operation vs. the eventTarget, this can really get slow.

If, on the other hand, you select an ancestor object that is much closer to the desired eventTarget, then a much smaller list of events from a much smaller list of objects flows through this particular delegated event handler and the whole event system can perform better.

For best performance with lots of events/objects, delegated event handlers should be applied as close to the target objects as possible.

Using on() to attach an event handler to an element that will be dynamically created

4 Answers4