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

Question

我定义了一个这样的表单:

<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”!为什么会发生这种情况？如何从此表单中选择数据？

Answer 1

我唯一能想到的是你的jquery正在尝试序列化尚未加载的东西。

所以你可以尝试包装你的

$('#zxForm').serialize()

进入

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

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