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

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

• main.php成功加载step2视图

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

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

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

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

您知道，您在步骤1中填写了一个表格，单击提交，步骤2显示，填写了一个表格，提交步骤3显示。 最好的方法是什么？

第二步视图：

<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。 理想情况下，您最终可能会希望以不同的方式组织代码以减轻这种痛苦。 很高兴能够将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>

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

Answer 2

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

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

就像是

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

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