在ajax之后无法读取隐藏属性的值

Question

我的网络应用程序

我有一个ajax脚本，它根据提交表单的输入标记将表单数据提交给不同的div。运行良好，除非ajax脚本需要读取返回的ajax数据。

剧本：

                        <script type="text/javascript">
                        $(document).ready(function() {
                         $("form").submit(function() {
                         // Getting the form ID
                         var  formID = $(this).attr('id');

//var hv = $('input[name=target]').val(); //this only worked for the 1st div, and hadn't worked for the 2nd div
//alert(hv);

//alert( $("#form2 input[name=target]").val() ); //works
alert ("formID at start is " + formID);
if (formID =="form1") {
    var hv = "div2";
    alert ("form id at 1st if is " + formID);
}
if (formID =="form2") {
    var hv = "response";
}
if (formID =="contact3") {
    var hv = "div1";
}

//alert (hv);
                         var formDetails = $('#'+formID);
                         $.ajax({
                         type: "POST",
                         url: 'file.php',
                         data: formDetails.serialize(),
                         success: function (data) { 
                         // Inserting html into the result div
                         $('#'+hv).html(data);
                         },
                         error: function(jqXHR, text, error){
                                    // Displaying if there are any errors
                                     $('#'+hv).html(error);           
                                }
                            });
                         return false;
                         });
                        });
                        </script>

HTML代码：

<div id="div1" style="background-color:lightblue">
    <form  name="contact1" action="contact.php" method="POST" id="form1">    
 <div>Name: <input type="text" name="name" id="name"   required /></div> 
 <div>Email: <input type="email" name="email" id="email"  required /></div>
 <input type="hidden" name="target" value="form2">
 <div><input type="submit" name="submit" value="Submit" /></div> 
</form>

    <p>This is Div FORM1</p>
</div>

<hr>


<div id="div2" style="background-color:yellow">
<form name="contact2" action="contact.php" method="POST" id="form2">    
 <div>Name: <input type="text" name="name"  required /></div> 
 <div>Message: <input type="text" name="message"  required /></div>
 <input type="hidden" name="target" value="response">
  <div><input type="submit" name="submit" value="Submit" /></div> 
</form>
    <p>This is DIV form 2</p>
</div> 




<div id="response" style="background-color:brown"><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p></div>

和file.php文件

<?php

if(isset($_POST['email'])){

 echo "Contact Form 1 Submitted Successfully";
}
elseif (isset($_POST['message'])){
 echo "Contact Form 2 Submitted Successfully";
}
elseif (isset($_POST['message'])){
 echo "Contact Form 3 in RESPONSE Submitted Successfully";
}
?>


<form name="contact3" action="contact.php" method="POST" id="contact3">    
 <div>new content: <input type="text" name="contact3"  required /></div> 
 <div>New content <input type="text" name="message3"  required /></div>
 <input type="hidden" name="target" value="form1">
 <div><input type="submit" name="submit" value="Submit" /></div> 
</form>

所以，基本上，当我点击form2的提交按钮时，响应div会更新。但是当我从file.php点击加载的内容时，jquery脚本不起作用。浏览器将整个屏幕发布到file.php。 ajax发布不起作用！

甘拜下风！！！！！

Answer 1

PHP文件中的新表单不起作用，因为它是动态添加的，您需要将代码更改为如下所示。

更改

$("form").submit(function() {

至

$(document).on('submit', 'form', function() {