JQuery Mobile 1.4不会为动态添加的输入控件</label>显示<label>

时间:2014-03-20 00:37:23

标签: jquery-mobile

从JQuery Mobile 1.3.1升级到1.4.2后,不再显示与动态添加的输入字段(文本和选择框)关联的标签。以前,应用程序看起来像这样:

enter image description here

地址字段应该更改以反映适合所选国家/地区的地址格式,在本例中为丹麦。

升级后,我现在在选择国家/地区时得到此结果:

enter image description here

在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如何处理这种情况发生了什么变化,以及我需要做些什么才能恢复以前的行为?

1 个答案:

答案 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