javascript - 通过 Ajax 调用加载元素后，单击事件不起作用

Question

我正在加载页面(包含 javascript)，然后加载 PartialView(包含表格)。问题是，我无法选择表 id，或者 onClick 事件不会触发。

索引.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>

partialView 正在使用 Ajax 加载，如下所示:

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

我已经尝试过 JsFiddle，并且 javascript 似乎工作正常。另外，一开始，您可能会认为问题是 jquery 无法找到该表，因为它是在 DOM 完成后加载的，但这就是我使用“on()”的原因，这不是让它活起来吗？即使在 DOM 完成之后也应该能够找到#table。

Answer 1

通过 Ajax 加载部分 View 后，单击事件不再绑定(bind)。按如下方式更改行单击事件。

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

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