从JQuery Mobile 1.3.1升级到1.4.2后,不再显示与动态添加的输入字段(文本和选择框)关联的标签。以前,应用程序看起来像这样:
地址字段应该更改以反映适合所选国家/地区的地址格式,在本例中为丹麦。
升级后,我现在在选择国家/地区时得到此结果:
在Firebug中,HTML看起来像这样:
<div id="meeting_address" class="ui-field-contain">
<fieldset class="ui-controlgroup ui-controlgroup-vertical ui-corner-all" data-role="controlgroup">
<div class="ui-controlgroup-controls ">
<label class="addr_name" for="name-meetingAddress">Location Name</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="name-meetingAddress" class="field_meeting_address" type="text" value="" maxsize="40" size="40" name="name-meetingAddress">
</div>
<label class="addr_street_address" for="street1-meetingAddress">Street Address</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="street1-meetingAddress" class="field_meeting_address" type="text" value="" maxsize="40" size="40" name="street1-meetingAddress">
</div>
<label class="addr_street_address2" for="street2-meetingAddress"></label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="street2-meetingAddress" class="field_meeting_address" type="text" value="" maxsize="40" size="40" name="street2-meetingAddress">
</div>
<label class="dk_addr_village" for="urbanization-meetingAddress">Village</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="urbanization-meetingAddress" class="field_meeting_address" type="text" value="" maxsize="40" size="40" name="urbanization-meetingAddress">
</div>
<label class="addr_postcode" for="postcode-meetingAddress">Post Code</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="postcode-meetingAddress" class="field_meeting_address" type="text" value="" maxsize="4" size="4" name="postcode-meetingAddress">
</div>
<label class="addr_district" for="district-meetingAddress">District</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="district-meetingAddress" class="field_meeting_address" type="text" value="" maxsize="20" size="20" name="district-meetingAddress">
</div>
<label class="addr_city" for="city-meetingAddress">City</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="city-meetingAddress" class="field_meeting_address" type="text" value="" maxsize="40" size="40" name="city-meetingAddress">
</div>
</div>
</fieldset>
升级后我做的唯一更改是将<div data-role="fieldcontain" id="meeting_address">
更改为<div id="meeting_address" class="ui-field-contain">
。我尝试在各种项目上调用.enhanceWithin()
但没有效果。我不需要做任何事情来初始化JQM 1.3.1中的这些控件。 JQM 1.4如何处理这种情况发生了什么变化,以及我需要做些什么才能恢复以前的行为?
答案 0 :(得分:1)
要解决标签问题,您需要将每个label
及其关联input
打包到div ui-field-contain
(1)。< / p>
在jQuery Mobile 1.4中,如果 controlgroup 存在,则元素应该直接附加到$(".selector").controlgroup("container")
而不是$(".selector")
。
在追加所有元素后,您需要增强这些元素.enhanceWithin()
并重新增强(刷新) controlgroup 而不是容器.controlgroup("refresh")
。
var input = '<div class="ui-field-contain">' +
'<label for="username">Username</label>' +
'<input type="text" id="username" />' +
'</div>';
$("#controlgroupID")
.controlgroup("container")
.append(input);
$("#controlgroupID")
.enhanceWithin()
.controlgroup("refresh");
<强> Demo 强>
(1) data-role="fieldcontain"
已弃用,将在jQM 1.5上删除。替换是div ui-field-contain
。