on() method doesn't work on dynamically generated HTML

Question

I am dynamically adding a table row (tr) to my table and these tr tags contain some links.

I have a jQuery script which is invoked when the links inside the tr are clicked. The script is not working for these links. It works when I reload the page and the tr is populated from the server side.

How can I overcome this problem?

$(".comment-like").on('click',function() {
    var spanEle = $(this).closest('li').find('.comment-like-count');
    if (spanEle.length) {
        var newCount = parseInt(spanEle.text(),10);
        spanEle.text(newCount + 1);
    }
});

The initial selector for `on` must exist at the time of binding. — Mathletics, Mar 12 '13 at 14:36
If you searched your question on `stackoverflow`, you would find like 50 posts... — Brad M, Mar 12 '13 at 14:36
@Brad : Well i am like everyone...so i think i am the 51st guy.. — Saurabh Kumar, Mar 12 '13 at 14:39

kidwon · Accepted Answer · 2013-03-12T14:44:18.087

3

You should delegate the listener to a parent like the table not the links themselves since they come and go dynamically Try this:

$('your table selector').on('click','.comment-like', function () {
    var spanEle = $(this).closest('li').find('.comment-like-count');
    if (spanEle.length) {
        var newCount = parseInt(spanEle.text(), 10);
        spanEle.text(newCount + 1);
    }
});

edited Mar 12 '13 at 14:44

answered Mar 12 '13 at 14:39

kidwon

4,270
4
26
45

score 0 · Answer 2 · answered Mar 12 '13 at 14:37

0

I think you want to use delegate instead.

answered Mar 12 '13 at 14:37

Mike Thomsen

35,490
10
55
80

1

As of jQuery 1.7, .delegate() has been superseded by the .on() method. – iappwebdev Mar 12 '13 at 14:38

score 0 · Answer 3 · answered Mar 12 '13 at 14:40

0

Choose a parent selector that exists on page load. If you don't have one, use $('body')

$('.elem-existing-on-pageload').on('click', '.comment-like', function() {
    ...
});

answered Mar 12 '13 at 14:40

iappwebdev

5,828
1
29
46

score -2 · Answer 4 · answered Mar 12 '13 at 14:38

-2

You have to attach the event handler for those new Elements after adding them.

answered Mar 12 '13 at 14:38

Johni

2,822
4
24
47

1

It's fine to use on, he just has to select an element existing on pageload. – iappwebdev Mar 12 '13 at 14:41

on() method doesn't work on dynamically generated HTML

4 Answers4