克隆的选择字段不起作用 - jQuery Mobile

Question

http://jsfiddle.net/V8bwZ/5/

大家好，

我在让克隆的选择字段正常工作时遇到了很多麻烦。所有克隆的选择字段都无法反映填充它们的选定项目。此外，当尝试在克隆的选择字段上选择新选项时，所选选项不会更新。

我有一种感觉，我一直忽略了一个非常简单的解决方案。感谢您的帮助。

<div class="address">
    <div class="address-clone section-clone">
        <!-- Contact Details Box -->
        <ul class="section-header list-divider blank" data-inset="false" data-role="listview" data-corners="false" data-icon="false">
            <li data-icon="plus" data-theme="f"><a class="clone-section">Address <span class="count"></span></a></li>
        </ul>

        <fieldset class="half">
            <div class="wrap closer">
                <input type="text" class="address_name" name="address_name" placeholder="Address Name"/>
            </div>
            <div class="wrap closer">
                <select name="address_type" class="address_type">
                    <option value="home">Home</option>
                    <option value="work">Work</option>
                </select>
            </div>
        </fieldset>

        <fieldset class="full">
            <div class="wrap"><input type="text" class="address_street_1" name="address_street_1" placeholder="Street"/></div>
            <div class="wrap"><input type="text" class="address_street_2" name="address_street_2" placeholder="Street 2"/></div>
            <div class="wrap"><input type="text" class="address_city" name="address_city" placeholder="City"/></div>
        </fieldset>

        <fieldset class="half">
            <div class="wrap closer">
                <select name="address_state" class="address_state">
                    <option value="blank">State</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
            </div>
            <div class="wrap closer">
                <input type="text" class="address_zip" name="address_zip" placeholder="Zip Code" />
            </div>
        </fieldset>
    </div>  
</div>

-- Javascript

<script>
var section = $('.address');
var sectionClone = $('.address').clone().addClass('cloned');

$(section).append(sectionClone);

$('.address-clone').each(function(i, t){
    $(this).find('.count').html(i + 1);
});

var addrClones = $('#contact-edit .address').children('.address-clone');

contact.address.forEach(function(n){

    var i = contact.address.indexOf(n);

    $(addrClones[i]).find('.address_name').val(n.address_name);
    $(addrClones[i]).find('.address_street_1').val(n.address_street_1);
    $(addrClones[i]).find('.address_street_2').val(n.address_street_2);


    if(n.address_type == 'work'){
        $(addrClones[i]).find('.address_type option[value="work"]').attr('selected',true);        
    }

    $(addrClones[i]).find('.address_city').val(n.address_city);
    $(addrClones[i]).find('.address_state').val(n.address_state);
    $(addrClones[i]).find('.address_zip').val(n.address_zip);

});



// clone address section
$('.clone-section').click(function(){

    alert('test');

    var section = $(this).closest('.address');
    var sectionClone = $(this).closest('.address').html();

    $(section).append(sectionClone);



    $('.address-clone').each(function(i, t){
        $(this).find('.count').html(i + 1);
    })
});
</script>

Answer 1

这是因为 JQueryMobile 正在绑定 javascript 操作以显示更改时的值。但是，当您克隆它们时，您将丢失这些事件。 但是，我尝试使用“.selectmenu()”快速重新初始化它们，发现这也会导致问题，因为您在 JQueryMobile 修改它们之后克隆它们，并且重新初始化它们会使 UI 有点混乱。

--编辑-- 看起来不支持克隆增强的小部件。 您可以使用 jquery 去除增强功能，然后在克隆的选择上调用 .selectmenu() 以重新初始化它们。

https://github.com/jquery/jquery-mobile/issues/4735