jQuery .on not working correctly

Question

I'm playing around with pagination and jQuery, my code first looked like this:

$(function() {
    $(".pagination a").live("click", function() {
        $.get(this.href, null, null, "script");
        return false;
    });
});

Then I noticed that live was removed in jQuery 1.9 so I changed my code to:

$(function() {
    $(".pagination").on("click", 'a', function() {
        $.get(this.href, null, null, "script");
        return false;
    });
});

But somehow this also won't work! The problem is that I can navigate from the first ajax page to the second but then form the second back to the first page or to the third page my ajax is not working. I supose because my code does not regognice the new added .pagination a.

replace `.pagination` with a static container, for better performance, chose the closest to `.pagination a`. — gdoron, Sep 17 '13 at 17:49
Are you replacing the original `.pagination` element? If so, you should apply the `.on` method to some high-level wrapper — viarnes, Sep 17 '13 at 17:49
This answer might help you. You're trying to attach click event listeners to dynamically created elements (which I overlooked when first answering). http://stackoverflow.com/questions/8029589/jquery-1-7-on-and-off-methods-for-dynamic-elements — Jay, Sep 17 '13 at 17:56
@technophobia, thanks, I was upset with all the answers, so finally I wrote an answer explaining why they were all wrong.(I tried to be as polite as possible while being angry... `:)` ) — gdoron, Sep 17 '13 at 18:03

gdoron · Accepted Answer · 2013-09-17T18:12:38.983

on is bound only for existing elements, if you want to make it listen to elements that were inserted after you use on you have to add a selector argument.
With a selector argument it's a delegate event, while without it's a direct event.
If you used on delegate event signature the callback is bound to the selector which the on was called upon $('thisSelector'), while it will listen to the events of the elements in the selector argument like
$('foo').on('event', 'thisSelector', func).
For better performance you should attach the on function to the closest static element to the newly inserted elements, this is actually the main reason why live was removed from jQuery in version 1.9, live attaches the listener to the document which has enormous performance penalty.

What we learned from the above, you must make sure .pagination is already in the DOM when you call on, and it shouldn't be replaced.

Now you should come with something like:

$("{staticElement-closeToTheNewElements}").on("click", '.pagination a',callback);

I didn't know `.live` worked by attaching to `document`. Thanks! — Jay, Sep 17 '13 at 18:07
@Jayraj, And I'm sorry for being rude, it is that 6 wrong answers can make you angry... I didn't want to answer it and left a comment, just when wrong answers got upvoted I answered. Again sorry for being rude. — gdoron, Sep 17 '13 at 18:10
Lol. I would see 6 wrong answers as an opportunity, personally :P. And I'm happy to have learned something new today, so no worries. — Jay, Sep 17 '13 at 20:19

score 1 · Answer 2 · answered Sep 17 '13 at 17:49

1

Could you try this?

$(function () {
    $(document).on("click", ".pagination a", function () {
        $.get(this.href, null, null, "script");
        return false;
    });
});

answered Sep 17 '13 at 17:49

Daniel Schwarz

284
1
10

2

one of the reasons `live` is dead is so you won't bind the callbacks to the `document`. – gdoron Sep 17 '13 at 17:50

score 1 · Answer 3 · edited May 23 '17 at 11:50

1

If you call:

~~$(document).on("click", '.pagination a', function(){...})~~

Should be:

$('#container-element').on("click", '.pagination a', function(){...})

it will call the event on any dynamically created element that matches the selector.

See above for optimal answer.

edited May 23 '17 at 11:50

Community

1
1

answered Sep 17 '13 at 17:51

Eric H.

6,894
8
43
62

3

@user2724695, please don't use it. it's not personal, but this answer isn't optimal, far from that. And if the event was `onmousemove` or similar mouse events you would event notice that. – gdoron Sep 17 '13 at 18:09

Venkata Krishna · Answer 4 · 2013-09-17T18:10:37.710

I'm hoping your html would like similar to this: If your div with class pagination is loaded via ajax it won't help by using it for event delegation since its not static.

 <body>
    <div id="static_div">
      <div class="pagination">
        <a href="" id="alink">I'm a link</a>
      </div>
    </div>
 </body>

Use

$('#static_div').on('click', '.pagination a', function(){...});

I'd suggest not to use body or document & use the closest static container to pagination for performance gain.

jQuery .on not working correctly

4 Answers4