Javascript table row click doesn't work after partial view gets refreshed

Question

I have a simple page that displays a table of items in a partial view.

<div id="divList">
    @Html.Action("_list")
</div>

_list.cshtml displays a list of items:

<table id=tblList">
    <thead>
        <tr>
            <th>List</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td>ItemName1</th>
        </tr>
        <tr id="2">
            <td>ItemName2</th>
        </tr>
    </tbody>
</table>

In the main page, I have the following javascript so that I can get the ID of the selected row:

$('#tblList tr').click(function () {
    alert($(this).attr("id"));
});

The above code works but it doesn't work after the partial view gets refreshed. So I did some research and figured that I need something like:

$('#tblList').on('click', 'tr', function () {
    alert("row clicked");
    alert($(this).attr("id"));
});

But I've tried many ways and combinations and I can't get it to work.. What am I missing? I've tried this solution but it didn't work either.

$('document').on('click', '#tblList tr', function () {
    alert("row clicked");
    alert($(this).attr("id"));
});

Shyju · Accepted Answer · 2017-03-14 22:44:25Z

1

Looks like you are updating the content of the div with id "divList" after you wire up the click event handler. So the dynamically injected DOM elements ( the new content of that div) will not have the click event handler registered.

Register your click event using jQuery on on the container div.

$('#divList').on('click', 'tr', function () {
    alert("row clicked");
    alert($(this).attr("id"));
});

jQuery on works for current and future(dynamically injected to DOM) elements

Here is working jsbin sample.

You should not have more than one element with the same id value. Id's should be unique.

edited Mar 14, 2017 at 22:44

answered Mar 14, 2017 at 22:34

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

8 Comments

kabichan Over a year ago

Thank you, it totally makes sense and I tried it but it's not working ...

Shyju Over a year ago

See the updated answer. You need to make sure you do not have duplicate ids

Shyju Over a year ago

Sorry ! I missed that. But the code i posted should work as long as you do not have any script errors in the page. See working sample here jsbin.com/wanidaxaxi/edit?html,js,output

kabichan Over a year ago

hmmm it does work in your example.. It really helps to know that this should work as I wasn't sure what I was doing wrong. I'll try more. Thank you!

Shyju Over a year ago

do you have any other script errors in the page which is preventing this code to execute ?

|

sleeyuen · Accepted Answer · 2017-03-14 22:29:30Z

0

The problem is that the click functions are already wired up to listen for clicks, but then when the partial gets refreshed, the functions don't know that they are supposed to listen to the "new" elements in the partial. Your best bet is to move the function to within the partial. That way the function also gets wired up to the latest content each time it's refreshed.

answered Mar 14, 2017 at 22:29

sleeyuen

9616 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript table row click doesn't work after partial view gets refreshed

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related