克隆模板Jquery

cloning template Jquery

本文关键字：Jquery      更新时间：2024-01-22

我有一个相当长的复杂表单用于记录字段数据。表格的一个部分要求能够添加一个没有记录数据的"字段空白"部分，并能够添加一条所有内容（包括字段空白部分的数据）都重复的重复部分。唯一会在副本上发生变化的是SampleID

字段空白脚本

 <script>
 var counter = 0;
 function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
    var theName = newField[i].name
    if (theName)
        newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
 }

 </script>

复制脚本

  <script>
  $(document).ready(function(){
  var template_index=0;
  $("#add_FieldDup").click(function(){
    template_index++;
    $(this).parent().before($("#template").clone().attr("id","template" + template_index));
    $("#template" + template_index).css("display","inline");
    $("#template" + template_index + " :input").each(function(){
        $(this).attr("name",$(this).attr("name") + template_index);
        $(this).attr("id",$(this).attr("id") + template_index);
        });
    $("#remove_Dup" + template_index).click(function(){
        $(this).closest("fieldset").remove();
    });
  }); 
 });
 </script>

我的表单

      <h3>Water Samples</h3>
      <fieldset id="template"> <!--for the duplicate-->
          <div id="template">  <!--for the duplicate-->
 Sample ID: <input type="text" id="SampleID" name="SampleID"></div>
 <div class="_40" data-role="controlgroup" data-mini="true" data-type="horizontal">
  <label> Collection Method</label><br />
         <input type="radio" id="radGrab" value="grab" name="Collection" />
      <label for="radGrab">Grab</label>
          <input type="radio" id="radEWI" value="EWI" name="Collection" />
      <label for="radEWI">EWI</label>
            </div>
    <fieldset>     <!--For the field blank-->
  <div id="readroot" class="hidden"> <!--For the field blank-->
  QA Sample ID:<input type="text" id="QASampleID" name="QASampleID">
 <div class="_30" data-role="controlgroup" data-mini="true" data-type="horizontal">
 <label>Collection Method</label><br />
         <input type="radio" id="radGrab1" value="Grab" name="Collection1" />
      <label for="radGrab1">Grab</label>
          <input type="radio" id="radEWI1" value="EWI" name="Collection1" />
      <label for="radEWI1">EWI</label></div>
  </div>
 <label class="analysis-label" for="analysis">Analyte:</label>
     <select class="analysis" id="analysis" name="analysis" data-iconpos="left" data-icon="grid">
    <option>Select</option>
           <option value = "TN">TN</option>
           <option value = "TP,NO2+3">TP,NO2+3</option>
           </select>
      <label class="preserve-label" for="preserve">Preserved</label>
      <select class="select_preserve" id="preserve" name="preserve" data-iconpos="left" data-icon="grid">
        <option>Select</option>
           <option value = "HNO3">HNO&#8323;</option>
           <option value = "H2SO4">H&#8322;SO&#8324;</option>
    </select>
     <label class="cool-label" for="cool">Cooled</label>
    <select class="select_cool" id="cool" name="cool" data-iconpos="left" data-icon="grid">  
        <option>Select</option>
           <option value = "Ice">Ice</option>
           <option value = "Frozen">Frozen</option>
           <option value = "None">None</option>
        </select>  
  </div>  <!--Fieldblank-->
  </fieldset>   <!--Fieldblank -->
 <hr /><span id="writeroot"></span> 
   </div>     <!--duplicate template-->
  </fieldset>   <!--duplicate template-->

 <button type="button" data-theme="b" data-icon="plus" id="moreFields" onclick="moreFields()">ADD FIELD BLANK</button>
 <button type="button" data-theme="b" data-icon="plus" id="add_FieldDup">ADD FIELD DUP</button>

我让副本工作（当字段空白未隐藏时），但我无法让字段空白工作。如有任何协助，我们将不胜感激！

您应该从dom中提取javascript，将其放在单独的js中，并使函数在任何一个块中工作，创建class="template"块，并在内部提供任何需要的交互按钮和输入类，这样就可以存在多个内部结构相同的父元素。。。那么克隆不会妨碍您的交互逻辑。

在js中类似：

$(document).ready(function() {
$(".template .interaction_button_one").on('click', function(){
    //... here you go traversing like
    $(this).parents('.template').find('.some_important_div').show();
})
});

注意.on（），这是委托，它将为所有元素提供相同的交互绑定。

相关文章：