为什么这个jQuery选择器找不到我的表单?

时间:2015-10-26 03:13:20

标签: javascript jquery

我已经定义了这样一个表单:

<div id="zxRegisterDiv" style="display: none; border: 1px solid;">
    <style type="text/css">
        label.zxLabel{
            display: inline-block;
            width: 100px;
        }
    </style>
    <form id="zxForm" action="" method="get" onsubmit="return false;">
        <label for="zxUserName" class="zxLabel">*用户名:</label><input type="text" name="zxUserName" id="zxUserName"/><br/>
        <label for="zxPassword" class="zxLabel">*密码:</label><input type="password" name="zxPassword" id="zxPassword"/><br/>
        <label for="zxRePassword" class="zxLabel">*确认密码:</label><input type="password" name="zxRePassword" id="zxRePassword"/><br/>
        <label for="zxNickname" class="zxLabel">*姓名:</label><input type="text" name="zxNickname" id="zxNickname"/><br/>
        <label for="zxSex" class="zxLabel">*性别:</label><select name="zxSex" id="zxSex"><option value="0">男</option><option value="1">女</option></select><br/>
        <label for="zxEmail" class="zxLabel">*电子邮箱:</label><input type="text" name="zxEmail" id="zxEmail"/><br/>
        <label for="zxWechat" class="zxLabel">*微信:</label><input type="text" name="zxWechat" id="zxWechat"/><br/>
        <label for="zxQQ" class="zxLabel">*QQ:</label><input type="text" name="zxQQ" id="zxQQ"/><br/>
        <label for="zxMobile" class="zxLabel">*手机:</label><input type="text" name="zxMobile" id="zxMobile"/><br/>
        <label for="zxCertificate">*手机验证码</label><input type="text" name="zxCertificate" id="zxCertificate"/><input type="button" name="zxGetCertificate" id="zxGetCertificate" />
        <button type="submit" id="submit" onclick="$.ajax({url: '/front/suggestion/doRegister.htm',type: 'POST',data: $('#zxRegisterDiv form').serialize(),success: function (data) {if (data == 'ok') {alert('成功');}}});"></button>
    </form>
</div>

但是当我使用这样的jQuery选择器时:

$('#zxForm').serialize()

它不会序列化任何数据,因为它根本无法选择我的表单“zxForm”!为什么会这样?如何从此表单中选择数据?

1 个答案:

答案 0 :(得分:1)

我唯一可以考虑的是你的jquery正在尝试序列化尚未加载的东西。

所以你可能会尝试包装你的

$('#zxForm').serialize()

<script>
$(document).ready(function(){
    $('#zxForm').serialize()
});
</script>

它允许您在调用脚本之前先加载页面。