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

因此，我有几个文件：

-- 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控制器

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

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

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

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

你知道，你在第一步填写表格，点击提交，第二步显示，填写表格，提交第三步显示。最好的办法是什么

步骤2视图：

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

$（文档）.ready（函数（）{
$（“#Foo”）.validate({
submitHandler:函数（表单）{
$.post（'../controller/step2.php'，$（“#Foo”）.serialize（），函数（数据）{
$（'#results_step2'）.html（数据）；
});
}
});
});
洛勒姆

酒吧
酒吧
酒吧
酒吧
酒吧
拯救

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

基本上，您的所有代码都在

document.ready

块中，该块仅在页面加载时运行。此时，您的Step2表单不存在，因此无法将Javascript事件绑定到它

差不多

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

---

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

代码不工作的原因是加载view2时document.ready已经发生

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

同时，以下几点可以解决您的问题：

选择1 选择2 如果您不想这样做，也可能会丢失document.ready from view2并将脚本移动到表单后，如下所示：

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

Lorem

酒吧
酒吧
酒吧
酒吧
酒吧
拯救
$（“#Foo”）.validate({
submitHandler:函数（表单）{
$.post（'../controller/step2.php'，$（“#Foo”）.serialize（），函数（数据）{
$（'#results_step2'）.html（数据）；
});
}
});

---

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

最好的方法是发布不起作用的step2 ajax调用。。。这样我们就能帮上忙。。这个ajax调用是一样的，它正在工作。但是当我调用main.php调用step1时，调用step2。。步骤2不起作用。它是独立工作的，但现在当main.php调用它时。。简单到“级别2”我们可以看到步骤2视图吗？您是否将步骤2加载到同一变量

数据
？看看这是否有帮助。这种形式的
在

上无法正常工作。您需要绑定到一个元素，该元素最终将包含您想要查看的元素—实际上给出否决理由的人：）谢谢，我会记住这一点。

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