-1

I'm having the following problem. Below is an explanation of what my PHP pages are and how they work. When I access form.php directly and try to submit it via AJAX, it works perfectly.

Problem - When I .load() form.php into main.php, none of the jQuery code within form.php fires. (verified through firebug) No submits, no alerts, nothing. How can I get the jQuery code within form.php to work when its loaded into main.php?

main.php -> This is the main PHP page which has a link on it. Once this link is clicked, the following jQuery code fires to load "form.php" within a div called #formcontainer. This is the code within main.php that loads 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 -> this is a form that gets loaded above. It submits data to MySQL through an jQuery .ajax() POST. Here is the jquery code which submits the form, which has an ID called #homeprofile.

<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(),
        });
    });
});
4

4 回答 4

3

像这样使用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;
});
于 2013-08-29T15:48:42.477 回答
1

您应该使用.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

});

希望这会有所帮助！

于 2013-08-29T16:32:14.403 回答
0

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

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

表格.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>
于 2013-08-29T16:14:08.970 回答
0

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

这将是您的 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>
于 2013-08-29T16:35:07.613 回答