通过Ajax调用加载元素后,Click事件无法正常工作

时间:2014-06-24 18:25:33

标签: javascript jquery ajax

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

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

使用Ajax加载partialView,如下所示:

$(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。

1 个答案:

答案 0 :(得分:1)

通过Ajax加载局部视图后,不再绑定click事件。更改您的行点击事件,如下所示。

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

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