On Click event not working after loading element through Ajax call

Question

I am loading the page (contains the javascript), and then I am loading the PartialView (contains the table). The problem is, I can't select the table id or the onClick event does not fire.

Index.cshtml

$('#sortingRow').on('click', 'th a', function () {
    $.ajax({
        url: this.href,
        type: 'GET',
        data: { sortOrder: sortOrder },
        success: function (result) {
            $('#sortingRow').parent().html(result);
            LoadSampleDesign();
        }
    });
    return false;
});

_PartialView.cshtml

<table>
    <tr id="sortingRow">
        <th>
            <a href="link">Click Me</a>
        </th>
    </tr>
</table>

That partialView is being loaded using Ajax, like this:

$(sections).on('click', '#sectionPageLinks a', function () {
    $.ajax({
        url: this.href,
        type: 'GET',
        success: function (result) {
            $('#sectionPageLinks').parent().html(result);
            LoadSampleDesign();
        }
    });
    return false;
});

I've tried JsFiddle and the javascript seems to be working correctly. Also, At first, you might think the problem is that jquery couldn't find the table since it was being loaded after DOM completed, but that's why I'm using "on()", doesn't that make it live so it should be able to find the #table even after DOM was completed.

Is the event handler being called after the partial loads? If not, the events can't be attached to elements that was not rendered in the dom yet. — DontVoteMeDown
– DontVoteMeDown, Commented Jun 24, 2014 at 18:28
On success function of the load, I've attempted this: $('#sortingRow').bind('click'); — JohnC1
– JohnC1, Commented Jun 24, 2014 at 18:31
When you specify your handler here: $('#sortingRow').on('click', 'th a', are you certain that #sortingRow has been loaded into the DOM at that point? It needs to exist, the th a elements do not. — Mister Epic
– Mister Epic, Commented Jun 24, 2014 at 18:33
If I got it right, the first code snippet should be called after(its means in the success) of the last code snippet. — DontVoteMeDown
– DontVoteMeDown, Commented Jun 24, 2014 at 18:34

Praveen Reddy · Accepted Answer · 2014-06-24 18:40:47Z

1

After loading the partial view via Ajax the click event is no longer bound. Change your row click event as follows.

~~$('#sortingRow').on('click', 'th a', function () {~~

$(document).on('click', '#sortingRow th a', function () {

edited Jun 24, 2014 at 18:40

answered Jun 24, 2014 at 18:33

Praveen Reddy

7,4133 gold badges25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

On Click event not working after loading element through Ajax call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related