jQuery的stopPropagation停止AJAX GET [英] jquery stopPropagation stopped ajax get

问题描述

我有一个可点击的行和AJAX链接最右边列的表。
当我点击该行中的链接，该行点击事件被解雇也是如此。

为了停止事件传播，我使用stopPropagation阻止点击事件触发的行。然而，AJAX GET成为一个普通的HTML得到的，从而导致加载了新的一页。

我怎么能有AJAX获取与传播站一起工作？

感谢。

下面是我的codeS：

 ＆LT; TR数据-ID =@ user.UserId的风格=光标：指针＆GT;
            ＆所述; TD＆GT;
                @ Html.DisplayFor（modelItem =＆GT; user.UserName）
            ＆LT; / TD＆GT;
            ＆所述; TD＆GT;
                @ Html.DisplayFor（modelItem =＆GT; user.Name）
            ＆LT; / TD＆GT;
            ＆所述; TD＆GT;
                @ Html.DisplayFor（modelItem =＆GT; user.LastLogin）
            ＆LT; / TD＆GT;
            ＆所述; TD＆GT;
                @ Ajax.ActionLink（删除，删除，新{ID = user.UserId}，新AjaxOptions
           {
               列举HTTPMethod =GET，
               的onSuccess =getModalSuccess
           }）|
                @ Ajax.ActionLink（重设密码，ResetPassword，新{ID = user.UserId}，新AjaxOptions
           {
               列举HTTPMethod =GET，
               的onSuccess =getModalSuccess
           }）
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;   @ Scripts.Render（〜/包/ jqueryval）
@ Scripts.Render（〜/脚本/ jquery.unobtrusive-ajax.js）＆LT;脚本＆GT;
    $（函数（）{
        $（'＃用户列表＆gt;＆TBODY GT; TR'）。点击（函数（）{
            VAR URL =/帐号/编辑/+ $（本）。数据（ID）;
            $获得（URL，getModalSuccess）;
        }）;        //要停止传播母公司，这将导致上述事件发射
        $（'＃用户列表＆gt;＆TBODY GT; TR＆GT; TD＆gt;一种'）点击（函数（五）{。
            e.stopPropagation（）;
        }）;
    }）;    功能getModalSuccess（数据）{
        $（'＃模态容器'）的html（数据）。
        $（'＃模式-对话框'）模态（'秀'）。
        $（'形式'）removeData（'验证'）。
        $（'形式'）removeData（'unobtrusiveValidation'）。
        $ .validator.unobtrusive.parse（形式）;
        $（'形式'）验证（）。
    }
＆LT; / SCRIPT＆GT;
 

生成的HTML

 ＆LT;数据阿贾克斯=真正的数据Ajax的方法=GET数据Ajax的成功=getModalSuccess的href =/帐号/删除/ b9b70187- 1188-4398-96f7-cda32e67b14a＆GT;删除＆LT; / A＆GT;
 

解决方案

得到我自己的解决方案。
相反，将实际的链接的锚HREF，我处理click事件，并从那里使用jquery获得（）和stopPropagation（）。 codeS低于

 ＆LT; A HREF =＃数据URL ='/ Account/Delete/@user.UserId'>测试与LT; / A＆GT;
 $（'＃用户列表＆gt;＆TBODY GT; TR＆GT; TD＆gt;一种'）点击（函数（五）{。
     VAR URL = $（本）。数据（URL）;
     $获得（URL，getModalSuccess）;
     e.stopPropagation（）;
 }）;
 

I have a table with clickable rows and ajax link at the most right column. When I clicked on the link in the row, the row clicked event get fired as well.

In order to stopped the event propagation, I've used stopPropagation to stop the row clicked event firing. However the ajax get became a normal HTML get, which result in loading a new page.

How can I have the AJAX get work together with stop propagation?

Thanks.

Below are my codes:

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

Generated HTML

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

解决方案

Got a solution for myself. Instead of placing the actual link in href of the anchors, I handle the click event, and from there using jquery .get() and stopPropagation(). Codes below

 <a href="#" data-url='/Account/Delete/@user.UserId'>Test</a>
 $('#user-list > tbody > tr > td > a').click(function (e) {
     var url = $(this).data('url');
     $.get(url, getModalSuccess);
     e.stopPropagation();
 });

这篇关于jQuery的stopPropagation停止AJAX GET的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！