克隆选择字段不工作 - 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修改它们之后克隆它们，并重新生成它们会使用户界面变得有点麻烦。

--edit-- 看起来像克隆增强小部件不受支持。 你可以使用jquery去除增强，然后调用克隆选择的.selectmenu（）以重新获取它们。

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