Question

我相信我的问题与我的第一个表单通过ajax成功返回一个新表单的事实有关.html（结果）在执行DOM之后。我的DOM中的jquery无法识别，因为元素在提交第一个表单之后才可见。如何获取我的 $（“＃fullFormMA”）。on（提交，（函数（e）{ 执行是躲过我。这是我的HTML

<?php 
session_start();
require_once('functions.php');
include('header.htm');?>
<title>Membership Application</title>
<meta name="description" content="">
</head> 
<body> 
<div id="container">
    <div id="loginBanner">
        <?php include ("loginMenu.php"); ?>
        <?php include ("bannerIcons.php"); ?>
    </div> <!--end loginBanner-->
    <div id="header" class="clear">
        </div> <!--end header-->
    <div id="content"><div class="content">
        <div id="colLt">
            <?php include('tabContent.php');?>
            <?php include('leftSidebar.php');?>
        </div>
        <div id="colRt"><div class="content">
        <h1>New Member Application</h1>
        <ul><li>submitting an application</li><li>submitting payment</li></ul><h6>Step #1&mdash;the application</h6>Please enter an email which will ultimately be used as your website username.  This email will remain as your private email.</p><br><br>
        <form method="post" name="checkUserMA" id="checkUserMA">
            <label class="clear" style="width:120px">Username/Email<br><span class="small"></span></label>
            <input type="text" name="usernameMA" id="usernameMA" class="green" style="width:300px;"/><br><br>
            <input type="submit" id="checkUserMA" class="submit" value="Submit" />
        </form>
        <div class="clear"></div>
        <div id="errorMA" style="background:yellow;width:200px;height:100px"></div>
        <div id="resultMA"></div>       
    </div></div>
    <div class="clear"></div>
    </div></div><!--end content-->  
<div id="footer">
<?php include("footer.htm") ?>
<!--<?php include("disclaimer.htm") ?>-->
</div><!--end footer-->
<div class="clear"></div>
</div><!--end container-->
<div class="clear"></div>
</body> 
</html>

这是我的jquery：

$(document).ready(function() {

$('#resultMA').hide();
$('#errorMA').hide();
$("#checkUserMA").submit(function(event){
    event.preventDefault();
    $("#resultMA").html('');
    var values = $(this).serialize();
    $.ajax({
        url: "checkMA.php",
        type: "post",
        data: values,
        success: function(result){
            $("#resultMA").html(result).fadeIn();
            $('.error').hide();
        },
        error:function(){
           // alert("failure");
            $("#resultMA").html('There was an error.  Please try again.').fadeIn();
        }
    });//end ajax
});

$("#fullFormMA").on(submit,(function(e){
    e.preventDefault();
    $("#errorMA").html('');
    var values = $(this).serialize();
    $.ajax({
        url: "validMA.php",
        type: "post",
        data: values,
        success: function(result){
        },
        error:function(){
        // alert("failure");
            $("#errorMA").html('There was an error.  Please try again.').fadeIn();
        }
    });//end ajax
    });
});//end dom

这是checkMA.php ...

<?php
session_start();
include('functions.php');
connect();
$username = urldecode(protect($_POST['usernameMA']));
$_SESSION['guestUser'] = $username;
$sql2 = mysql_query("SELECT username FROM members WHERE username = '$username'");
$checkNumRows = mysql_num_rows($sql2);
if (!$username){
    echo "<p class='red'>Enter an email to be used as your username...</p>";
} else if ($checkNumRows == 1){
    echo "<span style='font-weight:bold'>The username: ".$username." is already in use.</span>";    
} else if ($checkNumRows == 0){
    echo "<hr><p class='green'>This username is available.</p><p>Please continue with the registration process...</p><br>";?>
    <form method="post" name="fullFormMA" action="memberAppProcess.php">
        <h6>Public Information - this information will be displayed to website visitors</h6>
        <label class="clear" style="width:75px">Name</label>
        <label class="error" id="name_error">This field is required.</label>
        <input type="text" name="firstName" id="firstName" class="left inputCheck" style="width:150px" placeholder="first name"/>
        <input type="text" name="lastName" id="lastName" class="inputCheck" style="margin-left:10px" placeholder="last name"/><br><br>
        <input type="submit" name="fullFormMA" id="fullFormMA" class='submit right' onClick='submitFullForm();' value="Submit application">
        </form> 
    <?php
}?>

我的#checkUserMA有效，但我的#fullFormMA不起作用。我很想了解为什么（DOM已经加载？）以及如何修复我的代码以允许通过ajax .html（结果）添加“事后”的表单。谢谢。

Answer 1

它正在执行，你只是等待它存在的时间不够长。将新表单添加到文档后，立即将新表单的事件绑定移动到该行。

$("#resultMA").html(result).fadeIn();
$("#fullFormMA").on(submit,(function(e){...

Answer 2

在ajax成功之前，DOM已经准备就绪，因此您可以编写此JQuery完整代码

   $(document).ready(function() {
   $('#resultMA').hide();
   $('#errorMA').hide();
   $("#checkUserMA").submit(function(event){
event.preventDefault();
$("#resultMA").html('');
var values = $(this).serialize();
$.ajax({
    url: "checkMA.php",
    type: "post",
    data: values,
    success: function(result){
        $("#resultMA").html(result).fadeIn();
        $('.error').hide();
        RunAfterAjax();
       },
    error:function(){
       // alert("failure");
        $("#resultMA").html('There was an error.  Please try again.').fadeIn();
    }
});//end ajax
});
 function RunAfterAjax(){


 $("#fullFormMA").on(submit,(function(e){
e.preventDefault();
$("#errorMA").html('');
var values = $(this).serialize();
$.ajax({
    url: "validMA.php",
    type: "post",
    data: values,
    success: function(result){
    },
    error:function(){
    // alert("failure");
        $("#errorMA").html('There was an error.  Please try again.').fadeIn();
    }
});//end ajax
});
}
});//end dom

Answer 3

$("#fullFormMA").on(submit,(function(e){ /* ... */ });

fullFormMA是<input>，您应该绑定click而不是submit，并在事件名称周围使用引号。

使用$('#something').on('event', ...)时，仅当#something元素已存在时才有效。

您可以通过将侦听器委派给上层现有元素来修复代码：

$('#content').on('click', '#fullFormMA', function() { /* ... */ });

此代码将检测#fullFormMA事件上的click事件（如果在ajax响应之后添加它）。

执行jquery .submit在ajax成功后返回新表单

3 个答案: