为什么 .each() 找不到子元素？

Question

e.target 指向一个表单元素。我正在尝试遍历每个输入元素并收集名称和值，以便可以将它们作为参数传递给a .load()。 .each() 迭代器永远找不到 <input> 元素，因此不处理任何内容就退出。该表单包含一个包含输入的div 元素。

var formData = {};
$(e.target).has(":input").each(function(){
    formData[$(this).name] = $(this).value;
});

表单html：

<div id="partner-settings-form" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0" style="display: block; width: auto; min-height: 67.6875px; height: auto;">         
<article class="sign_in form-dialog clearfix">
      <div class="bg-form-dlg">
        <div class="col_100 clearfix">
<h2>UPS Shipping Information</h2>
<form enctype="application/x-www-form-urlencoded" class="sign_in_form sign_up_form" action="" method="post"><div class="zend_form">

<input type="hidden" name="partnerId" value="2" id="partnerId">
<div class="shippingdetails"><fieldset id="fieldset-account">
<div id="key-label" class="formlabel"><label for="key" class="required">Access Key: *</label></div>
<div id="key-element" class="formcontent">
<input type="text" name="key" id="key" value="..."></div>
<div id="id-label" class="formlabel"><label for="id" class="required">User ID: *</label></div>
<div id="id-element" class="formcontent">
<input type="text" name="id" id="id" value="..."></div>
<div id="password-label" class="formlabel"><label for="password" class="required">Password: *</label></div>
<div id="password-element" class="formcontent">
<input type="text" name="password" id="password" value="..."></div>
<div id="account_number-label" class="formlabel"><label for="account_number" class="required">Account Number: *</label></div>
<div id="account_number-element" class="formcontent">
<input type="text" name="account_number" id="account_number" value="..."></div>
<div id="address1-label" class="formlabel"><label for="address1" class="required">Address1: *</label></div>
<div id="address1-element" class="formcontent">
<input type="text" name="address1" id="address1" value="..."></div>
<div id="address2-label" class="formlabel"><label for="address2" class="optional">Address2:</label></div>
<div id="address2-element" class="formcontent">
<input type="text" name="address2" id="address2" value=""></div>
<div id="phone-label" class="formlabel"><label for="phone" class="required">Phone: *</label></div>
<div id="phone-element" class="formcontent">
<input type="text" name="phone" id="phone" value="..."></div>
<div id="city-label" class="formlabel"><label for="city" class="required">City: *</label></div>
<div id="city-element" class="formcontent">
<input type="text" name="city" id="city" value="Los Angeles"></div>
<div id="state-label" class="formlabel"><label for="state" class="required">State (code): *</label></div>
<div id="state-element" class="formcontent">
<input type="text" name="state" id="state" value="CA"></div>
<div id="country-label" class="formlabel"><label for="country" class="optional">Country:</label></div>
<div id="country-element" class="formcontent">
<select name="country" id="country" class="dlg-select">
    <option value="US" label="UNITED STATES" selected="selected">UNITED STATES</option>
    <option value="AF" label="AFGHANISTAN">AFGHANISTAN</option>
    <option value="..." label="...">...</option>
</select></div>
<div id="postal-label" class="formlabel"><label for="postal" class="required">Postal Code: *</label></div>
<div id="postal-element" class="formcontent">
<input type="text" name="postal" id="postal" value="90036"></div></fieldset></div>
<div>
<p><label id="configship-label">&nbsp;</label>
<input type="submit" name="configship" id="configship" value="Save Information"></p></div></div></form></div>
</div>
</article>

    </div>

Answer 1

然后尝试不同的方式

$(e.target).find('input').each();

Answer 2

为此使用.serialize()，无需重新发明轮子，伙计。

$(e.target).serialize();

编辑：

由于 .load() 使用查询字符串请求 GET，并使用对象请求 POST，因此 .serialize() 不会删除它。解决方法是使用 .ajax() 或调整您的代码，因为您遇到了错误：

var formData = {};
$(e.target).find('input').each(function() {
    formData[$(this).attr('name')] = $(this).val();  // .attr('name') and .val() instead.
});