jQuery click event not firing on dynamically added content

Question

I have the body of a table which is appended dynamically with ajax to the table element through a partial view in ASP.NET MVC. The partial view looks something like this...

@model IEnumerable<Plan>
@{
    Layout = null;    
}
@foreach (var plan in Model)
{
    <tr>
        <td>
            <a href="#" class="jumpToMyPlans">@plan.Name</a>
        </td>
    </tr>
}

...and appended to the table element which is static in the main View...

<table id="myPlanTable">
</table>

I am trying to register an onclick event for each of these anchor elements (there are a lot currently), using the jQuery on() function like this...

jQuery('#myPlanTable').on('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {
    console.log('click');
});

...but the event refuses to fire. I've checked the DOM traversal in the browser console and it's definitely correct and returns the expected DOM set.

Is it a typo, or you really have different classes in markup and in selector? — Andrei, Feb 10 '14 at 16:57
It's a dynamically added partial view that embedded in another view at runtime. I didn't include the controller action, nor the ajax that calls it because I don't think it's relevant. But i can add it — , Feb 10 '14 at 17:03
the ajax is relevant so that we can see what is being replaced, the rest likely isn't — Kevin B, Feb 10 '14 at 17:04
ajax isn't relevant, assume what is replaced is what I *said is replaced — , Feb 10 '14 at 17:21

score 0 · Accepted Answer · answered Feb 10 '14 at 17:20

This selection statement worked for me....

jQuery('#myPlanTable').on('click', 'tr:gt(0) > td > a.jumpToMyPlans', function () {
        console.log('click');
});

I think the problem was specifying tbody in the selector, which I guess is probably also dynamically generated, though not by me, I guess by the browser or something.

score 0 · Answer 2 · edited Dec 06 '17 at 10:56

0

When partial view is render through ajax or jquery then to bind Jquery events use "live" as following:

 jQuery('#myPlanTable').live('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {

        console.log('click');
    });

edited Dec 06 '17 at 10:56

Suresh Kamrushi

15,627
13
75
90

answered Feb 11 '14 at 13:46

RKT

114
5

live() is deprecated in favor of on() – Feb 11 '14 at 14:14

score -1 · Answer 3 · answered Feb 10 '14 at 17:01

-1

Try this:

jQuery('#myPlanTable').on('click', 'tbody > tr:gt(0) > td > a.jumpToMyPlans', function () {
     console.log('click');
});

1) Change a.jumpToMyActionPlans to a.jumpToMyPlans

2) Add ); to close your click handler

answered Feb 10 '14 at 17:01

Felix

37,892
8
43
55

Sorry those were typos in my question, my fault – Feb 10 '14 at 17:05

alecellis1985 · Answer 4 · 2014-02-10T17:54:49.880

-1

I tested this and the click worked:

$(document).on('click', '#myPlanTable a.jumpToMyPlans' , function () {
    alert('click');
});

the html i used to test it was:

<table id="myPlanTable">
     <tr>
        <td>
            <a href="#" class="jumpToMyPlans">PAPA</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="#" class="jumpToMyPlans">Sapo</a>
        </td>
    </tr>
</table>

Hope this helps you!

edited Feb 10 '14 at 17:54

answered Feb 10 '14 at 17:41

alecellis1985

131
2
15

Hm that's odd, specifying 'tbody' for me makes mine not work, but works without it – Feb 10 '14 at 17:49
1

Sorry, there is no tbody in your table, it would be #myPlanTable the first selector. going to fix in the answer. Im glad it worked :) – alecellis1985 Feb 10 '14 at 17:54
Yeah I'm using chrome to develop and apparently it adds tbody, theader and tfooter to table elements. I was looking at the generated DOM, seeing tbody and assuming that, since i hadn't created it, it would be reference-able when actions are delegated. Clearly wrong haha, best to leave it out entirely – Feb 10 '14 at 18:11
Incidentally, for that reason I don't think this a a duplicate of any other question, I wasn't using syntax wrong it was a browser idiosyncracy that other people might want to be aware of. Not sure why people voted this as duplicate. – Feb 10 '14 at 18:12

jQuery click event not firing on dynamically added content

4 Answers4