无法 .ajax() 提交已使用 jQuery .load() 加载到主页上的 php 表单答案

【问题标题】：Cant .ajax() submit a php form that has been loaded onto main page with jQuery .load()无法 .ajax() 提交已使用 jQuery .load() 加载到主页上的 php 表单
【发布时间】：2013-08-29 15:46:39
【问题描述】：

我遇到以下问题。下面解释了我的 PHP 页面是什么以及它们是如何工作的。当我直接访问 form.php 并尝试通过 AJAX 提交时，它工作得很好。

问题 - 当我 .load() form.php 进入 main.php 时，form.php 中的任何 jQuery 代码都不会触发。（通过萤火虫验证）没有提交，没有警报，什么都没有。如何让 form.php 中的 jQuery 代码在加载到 main.php 时工作？

main.php -> 这是主 PHP 页面，上面有一个链接。单击此链接后，将触发以下 jQuery 代码以在名为#formcontainer 的 div 中加载“form.php”。这是 main.php 中加载 form.php 的代码。

<a href="#" id="addHomeProfile">Foobar</a>
<div class="formcontainer"></div>
<script type="text/javascript">
$(document).ready(function(){
   $("#addHomeProfile").click(function(){
      $(".formcontaineropen").load("form.php");
   });
});
</script>

form.php -> 这是一个在上面加载的表单。它通过 jQuery .ajax() POST 向 MySQL 提交数据。这是提交表单的 jquery 代码，它有一个名为#homeprofile 的 ID。

<form id="homeprofile"> <input type="text" name="name" id="name" /> 
<input type="submit" value="submit" id="submit"></form>

<script type = "text/javascript">
$(document).ready(function() {
    $('#homeprofile').submit(function(e){
        e.preventDefault(); 
        alert("form submitted");
        $.ajax({ // Starter Ajax Call
           type: "POST",        
           url: 'update.php', 
           data: $('#homeprofile').serialize(),
        });
    });
});

【问题讨论】：

到底发生了什么？是否显示警报？
您的表单没有按钮，这使得提交非常困难。
Ajax PHP Created Form Not Submitting 的可能重复项
糟糕，对不起，我忘了在我的代码中添加行。不会出现警报，也不会进行数据库调用。似乎 form.php 中的任何 jQuery 代码都不会触发。
@HamedMomeni 这不是真的。 api.jquery.com/load

标签： php jquery ajax

【解决方案1】：

使用on() 表示喜欢，

$(document).on('submit','#homeprofile',function(e){
    e.preventDefault(); 
    alert("form submitted");
    $.ajax({ // Starter Ajax Call
       type: "POST", 
       url: 'update.php', 
       data: $('#homeprofile').serialize(),
   });
   return false;
});

【讨论】：

效果很好，谢谢！需要注意的是，我最终将这段 sn-p 代码移到 main.php 中，从而从 form.php 中删除了所有 jQuery 代码...问题解决了！

【解决方案2】：

您应该使用.on() 语法来定位动态创建的元素（初始渲染后由 JS 或 jQuery 加载到 DOM 中的元素）

好

// in english this syntax says "Within the document, listen for an element with id=homeprofile to get submitted"
$(document).on('submit','#homeprofile',function(e){

    //stop the form from submitting
    e.preventDefault(); 

    // put whatever code you need here

});

没有那么好

// in english this syntax says "RIGHT NOW attach a submit listener to the element with id=homeprofile
// if id=homeprofile does not exist when this is executed then the event listener is never attached
$('#homeprofile').on('submit',function(e){

    //stop the form from submitting
    e.preventDefault(); 

    // put whatever code you need here

});

希望这会有所帮助！

【讨论】：

感谢您的精彩解释！这有助于我完全理解如何使用上面@Rohan Kumar 提供的代码解决问题。

【解决方案3】：

小问题是您在 jquery 调用中引用了 formcontaineropen（这可能是一个错字？）。原因是通过 AJAX 加载的 JS 代码将被解释（因此不需要 eval()）但文档就绪事件将立即触发（这可能是在 AJAX 加载的内容实际插入并准备好在文档中之前 -因此提交事件可能无法正确绑定）。相反，您需要将代码绑定到 AJAX 请求的成功，如下所示：

main.php:

<html>
<a href="#" id="addHomeProfile">Foobar</a>
<div class="formcontainer"></div>
<script src='jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#addHomeProfile").click(function(){
      $(".formcontainer").load("form.php", '',
        function(responseText, textStatus, XMLHttpRequest) {
            onLoaded();
        });
   });
});
</script>

form.php:

<form id="homeprofile"> <input type="text" name="name" id="name" />
<input type="submit" value="submit" id="submit"></form>

<script type="text/javascript">
function onLoaded() {
    $('#homeprofile').submit(function(e){
        e.preventDefault();
        alert("form submitted");
        $.ajax({ // Starter Ajax Call
           type: "POST",
           url: 'update.php',
           data: $('#homeprofile').serialize(),
        });
    });
};
</script>

【讨论】：

准备好的回调将立即执行，因为 dom 已经准备好了。不过，您的解决方案可以解决可能发生的竞争条件。

【解决方案4】：

我的解决方案有点奇怪，但无论如何它就是这样。

这将是你的 main.php：

<a href="#" id="addHomeProfile">Foobar</a>
<div class="formcontainer"></div>
<script type="text/javascript">
$(document).ready(function(){
   $("#addHomeProfile").click(function(){
      $(".formcontaineropen").load("form.php", '', function(response){
           var res = $(response);
           eval($('script', res).html());
      });
   });
});
</script>

这是你的 form.php：

<form id="homeprofile"> <input type="text" name="name" id="name" /> 
<input type="submit" value="submit" id="submit"></form>

<script type = "text/javascript">

    $('#homeprofile').submit(function(e){
        e.preventDefault(); 
        alert("form submitted");
        $.ajax({ // Starter Ajax Call
           type: "POST",        
           url: 'update.php', 
           data: $('#homeprofile').serialize(),
        });
    });

</script>

【讨论】：