1

我相信我的问题与我的第一个表单在 DOM 执行后通过 ajax 成功 .html(result) 返回一个新表单这一事实有关。我在 DOM 中的 jquery 没有被识别，因为在提交第一个表单之后元素才可见。如何让我的$("#fullFormMA").on(submit,(function(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（结果）“事后”添加表单。谢谢你。

4

3 回答 3

0

DOM 在你的 ajax 成功之前就准备好了，所以你可以编写这个 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
于 2013-11-12T23:29:09.620 回答
0 
$("#fullFormMA").on(submit,(function(e){ /* ... */ });

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

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

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

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

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

于 2013-11-12T23:31:51.433 回答
0

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

$("#resultMA").html(result).fadeIn();
$("#fullFormMA").on(submit,(function(e){...
于 2013-11-12T23:25:39.407 回答