Question

I was reading this post

and had a question that I didn’t think it answered. Why does this work:

$('#threeButtons').live('click', '.markAsSpam', function() {
     // do some stuff
});

but this doesn’t:

$('#threeButtons').on('click', '.markAsSpam', function() {
     // do some stuff
});

I see the parameters are different, but I am following the example of how to use .on. At least as it applies to my example.

My DOM looks like

<div id="threeButtons">
     <a href="#" class="markAsSpam">Spam</a>
     ...
</div>

I need to use .live or .on because I am dealing with HTML that appended in the DOM. Also, my .live example only works the first time. What do I need to make it work on successive tries, without refreshing the page. I’m using jQuery 1.7 and want to use .on, since .live has been deprecated.

Answer 1

From the docs:

.live( events, data, handler(eventObject) )

So the following code will simply register a live click event for #threeButtons which will receive an additional argument .markAsSpam:

$('#threeButtons').live('click', '.markAsSpam', function() {
     // do some stuff
});

When using .on() however, you create a delegate where the click handler is bound on #threeButtons but the event will only fire if the clicked element matches the .markAsSpam selector.