jquery stopPropagation停止了ajax get
我有一个表格,其中包含可点击的行和最右边列的ajax链接。 当我点击行中的链接时,行点击事件也会被触发。
为了停止事件传播,我使用了stopPropagation来停止行点击事件触发。 然而,ajax get变成了普通的HTML get,导致加载新页面。
如何让AJAX与停止传播一起工作?
谢谢。
以下是我的代码:
@Html.DisplayFor(modelItem => user.UserName) @Html.DisplayFor(modelItem => user.Name) @Html.DisplayFor(modelItem => user.LastLogin) @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" }) @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js") $(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(); }
生成的HTML
Delete
问题是,上次我检查时,不显眼的Ajax使用以下构造来加载绑定。
$("a[data-ajax=true]").live("click", function (evt) { evt.preventDefault(); asyncRequest(this, { url: this.href, type: "GET", data: [] }); });
此构造绑定到document
事件。 换句话说,事件会冒泡到文档,然后才会发生ajax。 通过调用e.stopPropagation();
你明确地停止了事件的冒泡,直到附加ajax制作处理程序的文档,所以它不会被执行。
为自己找到了解决方案。 我没有将实际链接放在锚点的href中,而是使用jquery .get()和stopPropagation()来处理click事件。 代码如下
Test $('#user-list > tbody > tr > td > a').click(function (e) { var url = $(this).data('url'); $.get(url, getModalSuccess); e.stopPropagation(); });