部分 View 刷新后，Javascript 表行单击不起作用

Question

我有一个简单的页面，在部分 View 中显示项目表。

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

_list.cshtml 显示项目列表:

<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>

在主页中，我有以下 JavaScript，以便我可以获得所选行的 ID:

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

上面的代码可以工作，但是刷新部分 View 后就不起作用了。所以我做了一些研究并认为我需要类似的东西:

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

但是我尝试了很多方法和组合，但我无法让它发挥作用..我错过了什么？ 我试过这个solution但也没有成功。

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

Answer 1

在连接点击事件处理程序后，您似乎正在更新 ID 为“divList”的 div 的内容。因此动态注入(inject)的 DOM 元素(该 div 的新内容)将不会注册单击事件处理程序。

在容器 div 上使用 jQuery on 注册您的点击事件。

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

jQuery on 适用于当前和 future (动态注入(inject)到 DOM)元素

这里正在工作 jsbin sample .

不应有多个具有相同 id 值的元素。 Id 应该是唯一的。