刷新部分视图后，Javascript表格行单击不起作用答案

【问题标题】：Javascript table row click doesn't work after partial view gets refreshed刷新部分视图后，Javascript表格行单击不起作用
【发布时间】：2017-03-14 22:17:02
【问题描述】：

我有一个在局部视图中显示项目表的简单页面。

<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"));
});

上面的代码可以工作，但是在局部视图被刷新后就不能工作了。所以我做了一些研究，发现我需要这样的东西：

$('#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"));
});

【问题讨论】：

标签： javascript asp.net-mvc

【解决方案1】：

在连接 click 事件处理程序后，您似乎正在更新 id 为“divList”的 div 的内容。因此动态注入的 DOM 元素（该 div 的新内容）不会注册 click 事件处理程序。

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

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

jQuery on 适用于当前和未来（动态注入到 DOM）元素

这里正在工作jsbin sample。

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

【讨论】：

谢谢，这完全有道理，我试过了，但它不起作用......
查看更新后的答案。您需要确保您没有重复的 ID
对不起！我错过了。但是只要页面中没有任何脚本错误，我发布的代码就应该可以工作。在此处查看工作示例jsbin.com/wanidaxaxi/edit?html,js,output
嗯，它在您的示例中确实有效。知道这应该有效，因为我不确定自己做错了什么，这真的很有帮助。我会尝试更多。谢谢！
页面中是否还有其他脚本错误导致此代码无法执行？

【解决方案2】：

问题是点击函数已经被连接以监听点击，但是当部分被刷新时，函数不知道他们应该监听部分中的“新”元素。您最好的选择是将功能移动到部分内。这样，每次刷新时，该函数也会连接到最新的内容。

【讨论】：