Question

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

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

Answer 1

在点击事件处理程序之后，看起来您正在使用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应该是唯一的。

Answer 2

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

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

2 个答案: