1

所以，我有几个文件：

-- model      -- step1.php
              -- step2.php
-- view       -- main.php
              -- step1.php
              -- step2.php
-- controller -- step1.php
              -- step2.php

现在基本上我要做的是从 main.php 调用 step1 视图：

$(document).ready(function(){
    $("#MyForm").validate({
        submitHandler: function(form) {
            $.post('../controller/step1.php', $("#MyForm").serialize(), function(data) {
                $('#step1_controller').html(data);
            });
        }
    });
});

这可行，但是当您在 main.php 中提交表单时，会执行 step1 控制器并加载 step2 视图。

问题是，当我通过这个 ajax 请求加载 step2 视图时，step2 视图不再能够加载 step2 控制器。但是，当我在浏览器中打开 step2 视图时，一切正常，并且已加载 step2 控制器。

main.php -> 加载 step2.php -> 加载 step2 控制器

  • main.php 成功加载 step2 视图

  • step2视图成功加载step2控制器

  • 但是 main.php 无法加载 step2 控制器

我知道这有点令人困惑，但如果有人可以帮助我，我将非常感激。

无论如何，所有这些使用这些动态 ajax 加载安装步骤的页面是如何工作的？

要知道，你在step1填表，点击submit，step2显示，填表，submit step3显示。最好的方法是什么？

step2 视图：

<script>
$(document).ready(function(){
    $("#Foo").validate({
        submitHandler: function(form) {
                $.post('../controller/step2.php', $("#Foo").serialize(), function(data) {
                $('#results_step2').html(data);
            });
        }
    });
});
</script>


<h1 class="header_step2">Lorem</h1>

<p />

<form name="Foo" id="Foo" action="" method="POST" enctype="multipart/form-data">
<select size="1" name="Bar">
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
</select>

<button type="submit">
<div id="results_step2"> Save </div>
</button>
</form>
4

2 回答 2

0

您的代码不起作用的原因是 document.ready 在您加载 view2 时已经发生。

对此的快速解决方法是在呈现相应表单的成功回调中附加验证侦听器。这将允许您从 view2 中删除您的 javascript。理想情况下，您最终可能希望以不同的方式组织代码以减轻这种痛苦。能够将 javascript 与 html 分开是件好事。

同时，以下内容应该可以解决您的问题：

选项1

$(document).ready(function(){

    var attachFooValidation = function() {
        $("#Foo").validate({
            submitHandler: function(form) {
                $.post('../controller/step2.php', $("#Foo").serialize(), function(data) {
                    $('#results_step2').html(data);
                });
            }
        });
    }

    $("#MyForm").validate({
        submitHandler: function(form) {
            $.post('../controller/step1.php', $("#MyForm").serialize(), function(data) {
                $('#step1_controller').html(data);
                attachFooValidation();
            });
        }
    });
});

选项 2

如果您不想这样做，您也可以从 view2 中丢失 document.ready 并将脚本移动到表单之后，如下所示： 

<h1 class="header_step2">Lorem</h1>

<p />

<form name="Foo" id="Foo" action="" method="POST" enctype="multipart/form-data">
<select size="1" name="Bar">
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
  <option value="Foo">Bar</option>
</select>

<button type="submit">
<div id="results_step2"> Save </div>
</button>
</form>

<script>
$("#Foo").validate({
    submitHandler: function(form) {
            $.post('../controller/step2.php', $("#Foo").serialize(), function(data) {
            $('#results_step2').html(data);
        });
    }
});
</script>

也就是说，我建议重新组织代码以将脚本与标记分开。

于 2013-05-01T15:18:31.693 回答
-1

您需要阅读将侦听器绑定到 Javascript (jQuery) 中的事件，以便正确处理通过 ajax 加载的新元素

基本上，您的所有代码都在document.ready块中，该块仅在页面加载时运行。此时您的第 2 步表单不存在，因此不会将 Javascript 事件绑定到它

就像是

$("#MyForm").on('submit', function() {
   $(this).validate({
       // your code here
   });
});

会将 ID 为 #MyForm 的所有表单的提交事件绑定到验证代码

于 2013-05-01T13:14:31.687 回答