jQuery手機克隆

我想讓jQuery-mobile克隆一個div，就像我在jsfiddle上做的那樣。jQuery手機克隆

頭

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
<link rel="stylesheet" type="text/css" href="form.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.maskedinput.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="json2.min.js"></script> 

<!--[if lt IE 9]> 
<script type="text/javascript" src="flashcanvas.js"></script> 
<![endif]--> 

<script type="text/javascript" src="CreateXMLScript.js"></script> 

<script> 
    $(document).bind('mobileinit', function() { 
    $.mobile.page.prototype.options.addBackBtn= true; 
    $.mobile.page.prototype.options.backBtnText="Back"; 
    $.mobile.page.prototype.options.backBtnIcon="arrow-l"; 
    $.mobile.selectmenu.prototype.options.nativeMenu = false; 
    $.mobile.page.prototype.options.keepNative = ".native"; 
    $.mobile.keepNative=".native"; 
    }) 
</script> 

<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

HTML

<div id="Template" class="template hide"> 
    <div class="_100"> 
     <div class="_25"> 
     <fieldset> 
     <label class="label_analysis" for="analysis">Analyte:</label> 
      <select class="select_analyte" name="analysis" id="analysis"> 
      <option value="">Select</option> 
       <option value="TN">TN</option> 
       <option value="TP,NO2+3">TP,NO2+3</option> 
       <option value="TP,NO2+3,NH3+4">TP,NO2+3,NH3+4</option> 
       <option value="DO">Dissolved Orthophosphate</option> 
       <option value="TR">TR Metals, Hardness</option> 
       <option value="FF">Dissolved Aluminum (FF)</option> 
       <option value="ULL">TR Metals (ULL Hg)</option> 
       <option value="TSS">TSS</option> 
       <option value="TSS/TDS">TSS/TDS</option> 
       <option value="DM">Dissolved Metals (FF)</option> 
       <option value="TOC">TOC</option> 
       <option value="ABF">Anions, Bromide, Fluoride</option> 
       <option value="CH">Cations, Hardness</option> 
      </select> 
      </fieldset> 
     </div> 

     <div data-role="controlgroup" class="_13"> 
      <label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">0.45u Filtered</label> 
      <label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">Field Dup</label> 
      </div> 

     <div class="_25"> 
     <fieldset> 
      <label class="label_preserve" for="preserve">Preserved</label> 
      <select class="select_preserve" name="preserve" id="preserve"> 
       <option value="">Select</option> 
       <option value="HNO3">HNO&#8323;</option> 
       <option value="H2SO4">H&#8322;SO&#8324;</option> 
       <option value="H3PO4">H&#8323;PO&#8324;</option> 
       <option value="HCL">HCL</option> 
       <option value="None1">None</option> 
      </select> 
      </fieldset> 
     </div> 
     <div class="_20"> 
     <fieldset> 
      <label class="label_cool" for="cool">Cooled</label> 
      <select class="select_cool" name="cool" id="cool"> 
       <option value="">Select</option> 
       <option value="Ice">Ice</option> 
       <option value="Frozen">Frozen</option> 
       <option value="None">None</option> 
      </select> 
     </fieldset> 
     </div> 
     <div class="_13"> 
     <a href="#" type="button" data-theme="e" data-mini="true" data-icon="delete" title="Remove" class="removeNew">Remove</a> 
     </div> 
    </div> 
    </div> 

    <div id="addNew"> 
    <a href="#" type="button" data-theme="b" data-icon="add" title="Duplicate" class="showNew">ADD ANALYTE</a> 
    </div>

腳本

<script> 
    $(document).ready(function() { 
     (function ($) { 
    var Template = $('#Template'); 
    var count = 0; 
    var nextId = 0; 

    Template.find('.removeNew').on('click', function (e) { 
     e.preventDefault(); 
     $(this).closest('.template').remove(); 
     count--; 
    }); 

    function cloneTemplate(removable) { 
     var clone = Template.clone(true, true); 
     clone.attr('id', clone.attr('id') + nextId); 

     clone.find('label[for]').each(function(index) { 
      var elem = $(this); 
      elem.attr('for', elem.attr('for') + nextId); 
     }); 

     clone.find('select, input').each(function(index) { 
      var elem = $(this); 
      elem.attr('id', elem.attr('id') + nextId); 
      elem.attr('name', elem.attr('name') + nextId); 
     }); 

     if (!removable) { 
      clone.find('.removeNew').remove(); 
     } 

     clone.insertBefore("#addNew").removeClass('hide'); 
     count++; 
     nextId++; 
    } 

    // Create First Analyte and delete the remove button. 
    cloneTemplate(false); 

    $('a.showNew').on('click', function (e) { 
     e.preventDefault(); 
     cloneTemplate(true); 
     return false; 
    }); 
    })(jQuery) 
    }); 
    </script>

我收到噸的幫助與jQuery但無論我做什麼，它只是將無法工作在jQuery的移動。要麼它上下顛倒（第1項成爲最後一個，所有字段都填充）或新的div上的新字段不會讓我填充它們（當前問題）。

我沒有創建小提琴，因爲我嘗試過的所有東西都可以在小提琴中使用，而不是在手機中。

來源

2014-04-03 pja

更換願與pageinit事件。 – Omar

喜歡這個？

相關問題