jquery stopPropagation停止ajax得到

我有一个可点击的行和ajax链接在最右栏的表。当我单击该行中的链接时，行单击事件也会被触发。jquery stopPropagation停止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>

来源

2014-02-21 Alvin Then

正在生成什么标记？这听起来像是当你点击链接时得到表单提交，所以也许尝试返回结合stopPropagation和preventDefault的false？ – kinakuta

在标记事件处理程序中，您可能需要** e.preventDefault（）** - 关闭“导致加载新页面的结果” –

@kinakuta添加生成的HTML –

为我自己找到了解决方案。而不是将实际链接放置在锚点的href中，我处理click事件，并从那里使用jquery.get（）和stopPropagation（）。以下代码

<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(); 
});

来源

2014-02-21 14:36:15

的事情是，我最后一次检查，不显眼的阿贾克斯用下面的构造对负载进行绑定。

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

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

来源

2014-02-21 10:34:54 Oybek

jquery stopPropagation停止ajax得到

回答

相关问题