0

我有一个通过 Ajax.ActionLink 加载 Partial 的 MVC 页面，它可以工作，然后加载的 Partial 包含一个具有 Ajax.BeginForm 的表单。此表单没有连接到不显眼的 ajax，而是执行页面刷新（我在浏览器的网络日志中验证了这一点，当我单击提交时显示发起者是浏览器而不是 jquery）。

我认为问题在于，由于加载页面时表单不存在（但后来通过 Ajax.ActionLink 添加），所以不显眼的 ajax 没有在新添加的表单上看到 data-ajax 属性和连接必要的事件。我假设这只发生在 document.ready 中，并且当时不存在 ajax 表单。

有什么我可以说的“嘿，Unobtrusive Ajax，请再次查看我的页面，因为我有一些用 data-ajax 标记的新元素并将它们连接起来”？

谢谢。

查看不显眼的 ajax 源代码，它有：

$("form[data-ajax=true]").live("submit", function (evt) {
        var clickInfo = $(this).data(data_click) || [];
        evt.preventDefault();
...

生成的表单标签如下所示：

<form action="/Path/Create" class="form-horizontal" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#ParentContainer" id="PathForm" method="post" novalidate="novalidate">

据我所知，.live 事件上的选择器应该在新表单加载到页面上时拾取它。然而，该表单位于引导模式内，所以我不知道这是否会阻止事件以某种方式冒泡。

我什至可以在 Chrome 控制台中运行它：

 $("form[data-ajax=true]").live("submit", function (evt) {
            var clickInfo = $(this).data(data_click) || [];
            evt.preventDefault(); });

它成功返回表单元素，但是当我单击提交时，它仍然会刷新整个页面。我希望它至少不会做任何事情，因为我将它连接到 preventDefault。

4

1 回答 1

0

要回答我自己关于不显眼的 ajax 和动态加载的内容的问题，它应该可以开箱即用。它使用 .live(deprecated, still works current )连接到事件的方式应该检测动态加载到页面上的表单。 因此，显然它不会遇到与不显眼的验证相同的问题。

我们的问题与此无关。我们使用的是引导模式，它从表单内部生成了一个模式 div。由于模态然后加载了另一个包含表单的页面，我们意识到我们在一个表单中有一个表单（尽管它看起来并不像那样，因为另一个表单在模态中）。

为了解决这个问题，我们将第一个表单中模态 div 的声明移到表单之外。我们仍然可以有一个引用模态框的链接来显示它，但不是模态框的内部表单不会嵌套在第一个表单中。

我相信这导致 .live 和 .on 方法都没有捕获事件的原因是因为它们依赖于事件来冒泡到文档，并且它只冒泡到不是 ajax 表单的外部表单，因此与选择器不匹配。

另一种解决方案是编写 .on 更像这样，这样当事件冒泡到内部表单的容器时就会被捕获，而不是将其范围限定在事件首先到达外部表单的文档中。

$('#innerModalId').on("submit", "form[data-ajax=true]", function (evt) {
   evt.preventDefault(); 
   ...
   return false 
});

然而，由于这是一个库的一部分，这不是一个理想的解决方案，因为我需要重复他们的代码。我们没有更新不显眼的 ajax： http: //nuget.org/packages/jQuery.Ajax.Unobtrusive

但我认为我们仍然会遇到问题，因为即使使用 .on 由于我们的页面结构问题，它仍然无法正常工作。

于 2012-11-08T18:54:54.507 回答