javascript - SerializeObject 和 SerializeArray 未显示在 console.log 上

Question

我的 JSFiddle here

我知道这里有很多关于此的帖子，但我想知道为什么这些(SerializeObject/Serialize/SerializeArray())在 onclick 后没有显示在我的 console.log 上。

HTML:

<form action="#" method="post" id="testform" name="testform">
             <input class="input_rid" type="text" name="rid" id="rid" value="" placeholder="rid" required>
             <input class="input_recipient_id" type="text" name="recipient_id" id="recipient_id" value="" placeholder="recipient_id" required>
                <select class="select_eml" name="email_type" id="email_type" required>
                    <option value="" selected="selected" disabled="disabled">
                        Email type
                    </option>
                    <option value="Body">Body</option>
                    <option value="Body & Attachment">Body & Attachment</option>
                    <option value="Link">Link</option>
                    <option value="Internal Attachment">Internal Attachment</option>
                    <option value="External Attachment">External Attachment</option>
                    </select>
                <select class="select_tcb" name="to_cc_bcc" id="to_cc_bcc">
                    <option value="" selected="selected" disabled="disabled">
                        To_CC_BCC
                    </option>
                    <option value="to">To</option>
                    <option value="cc">CC</option>
                    <option value="bcc">BCC</option>
                    </select>
            <input class="input_sd" type="date" name="start_dte" id="start_dte" value="" placeholder="start_dte" required>

            <input class="input_ed" type="date" name="end_dte" id="end_dte" value="" placeholder="end_dte">
             <input class="button small radius right inline" type="button" onclick="return test();" value="Save to Console Log">

</form>

JS:

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};


function test() {
var v = $("#testform").serializeObject();
console.log(v);
console.log($("#testform").serialize());
console.log($("#testform").serializeArray());
}

Answer 1

这里的问题是测试函数是在窗口加载范围内声明的，当您单击该按钮时，解释器无法找到调用的函数。

要使该示例正常工作，请将函数声明移到 $(window).on('load') 范围之外，或者只是全局声明它:

window.test = function() {
 var v = $("#testform").serializeObject();
 console.log(v);
 console.log($("#testform").serialize());
 console.log($("#testform").serializeArray());
}