Question

所以，我有几个文件：

-- 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 - ＆gt; load step2.php - ＆gt;加载step2控制器

main.php成功加载step2视图
step2 view成功加载step2 controller
但是main.php无法加载step2 controller

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

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

你知道，你在第1步填写表格，点击提交，第2步显示，填写表格，提交第3步显示。什么是最好的方式？

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>

Answer 1

您的代码无法正常工作的原因是，在加载view2时，document.ready已经发生。

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

与此同时，以下内容应解决您的问题：

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

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

Answer 2

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

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

像

这样的东西

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

将所有表单的提交事件与id #MyForm绑定到验证代码

为动态添加的内容注册事件处理程序

2 个答案:

选项1

选项2