Question

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

我认为问题在于，由于表单在加载页面时不存在（但后来通过Ajax.ActionLink添加），那么不引人注目的ajax在新的上没有看到data-ajax属性添加表格并连接必要的活动。我假设只发生在document.ready，然后ajax形式不存在。

我能做些什么来说“嘿Unobstrusive Ajax，请再次查看我的页面，因为我有一些标有data-ajax的新元素并将它们连接起来”？ < / p>

感谢。

看着不引人注目的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事件上的选择器应该在新表单加载到页面时接收。然而，表单在bootstrap模式中，所以我不知道是否会阻止事件冒泡。

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

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

它成功返回表单元素，但是当我单击提交时，它仍然会刷新整页。我希望它至少不要因为我把它连接到preventDefault。

Answer 1

要回答我自己关于不显眼的ajax和动态加载内容的问题，它应该可以正常使用。它通过.live连接到事件的方式（不推荐使用，仍然可以当前）应该检测动态加载到页面上的表单。所以显然它不会遇到同样的问题不引人注意的验证确实。

我们的问题与此无关。我们使用bootstrap模式，从表单内部生成一个模态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，由于我们的页面结构问题，它仍然无效。

连接在doc.ready期间不存在的Ajax.BeginForm？

1 个答案: