Question

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

问题 - 当我.load（）form.php进入main.php时，form.php中的jQuery代码都不会触发。（通过萤火虫验证）没有提交，没有警报，没有。如何将form.php中的jQuery代码加载到main.php中来运行？

main.php - ＆gt;这是主页上有一个链接的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 - ＆gt;这是一个上面加载的表单。它通过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(),
        });
    });
});

Answer 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;
});

Answer 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 });

希望这有帮助！

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

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

Cant .ajax（）使用jQuery .load（）提交已加载到主页面的php表单

4 个答案: