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

Question

所以，我有几个文件:

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

现在基本上我想做的是从 main.php 调用 step1 View :

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

这是可行的，但是当您在 main.php 中提交表单时，将执行步骤 1 Controller 并加载步骤 2 View 。

问题是，当我通过这个ajax请求加载step2 View 时，step2 View 不再能够加载step2 Controller 。然而，当我在浏览器中打开 step2 View 时，一切正常并且加载了 step2 Controller 。

main.php -> 加载step2.php -> 加载step2 Controller

• main.php 成功加载第 2 步 View

• step2 View 成功加载step2 Controller

• 但是 main.php 无法加载 step2 Controller

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

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

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

第2步 View :

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

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