javascript - jquery stopPropagation 停止 ajax get

Question

我有一个表格，其中包含可单击的行和最右列的 ajax 链接。当我单击该行中的链接时，该行单击事件也会被触发。

为了停止事件传播，我使用 stopPropagation 来停止行单击事件触发。然而，ajax get 变成了普通的 HTML get，这导致加载新页面。

如何让 AJAX 与停止传播一起工作？

谢谢。

下面是我的代码:

<tr data-id="@user.UserId" style="cursor:pointer">
            <td>
                @Html.DisplayFor(modelItem => user.UserName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => user.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => user.LastLogin)
            </td>
            <td>
                @Ajax.ActionLink("Delete", "Delete", new { id = user.UserId }, new AjaxOptions
           {
               HttpMethod = "GET",
               OnSuccess = "getModalSuccess"
           }) |
                @Ajax.ActionLink("Reset password", "ResetPassword", new { id = user.UserId }, new AjaxOptions
           {
               HttpMethod = "GET",
               OnSuccess = "getModalSuccess"
           })
            </td>
        </tr>

   @Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")

<script>
    $(function () {
        $('#user-list > tbody > tr').click(function () {
            var url = "/Account/Edit/" + $(this).data('id');
            $.get(url, getModalSuccess);
        });

        // To stop propagation to parent, which causes event above fired
        $('#user-list > tbody > tr > td > a').click(function (e) {
            e.stopPropagation();
        });
    });

    function getModalSuccess(data) {
        $('#modal-container').html(data);
        $('#modal-dialog').modal('show');
        $('form').removeData('validator');
        $('form').removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse('form');
        $('form').validate();
    }
</script>

生成的 HTML

<a data-ajax="true" data-ajax-method="GET" data-ajax-success="getModalSuccess" href="/Account/Delete/b9b70187-1188-4398-96f7-cda32e67b14a">Delete</a>

Answer 1

问题是，我上次检查时，不引人注目的 Ajax 使用以下构造在加载时进行绑定(bind)。

$("a[data-ajax=true]").live("click", function (evt) {
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

此构造绑定(bind)到 document 事件。换句话说，事件冒泡到文档，然后 ajax 才会发生。通过调用e.stopPropagation();，您可以显式停止事件冒泡直至附加ajax制作处理程序的文档，因此它不会被执行。