使用 clone() 绑定重复事件

Question

我已经通过此 javascript 代码复制了我的 html 元素，但我无法复制 code.Will 的事件，你们这些 gyups 请证明我可能的解决方案。

 <script type = "text/javascript" language = "javascript">
  
  
  function func_addmore(){
 $(document).ready(function() {
            $("div").click(function () {
               $(this).clone().insertAfter(this);
  
            });
         });
   
  }
      </script>

 <body id="show" onload="func_load()">

<form method="POST" action="get_value.php" >
<table class="table table-condensed">
  <tr>
    <td  width="1%"><span> Level of Education:</span></td>
       <td >
     <select id="title" name="title" >
      <option value="none" selected >----Select ----</option>
      <option id="1">Masters</option>
      <option id="2">Bachelors</option>
   <option id="3">HSC</option>
   <option id="4">SSC</option>
     </select>
    </td>
  </tr>
  <tr>
    <td ><span>Exam/Degee Title:</span></td>
    <td ><input name="degreetitle"  type="text" id="name" size="19" class=""/></td>
  </tr>
  <tr>
  
  
     <tr>
    <td><span>Concentration/Major:</span></td>
    <td><input name="major"  type="text" id="name" size="19" class=""/></td>
  </tr>
  
    <tr>
  
    <td><span>Institutions:</span></td>
    <td>
     <select id="institutions" name="institutions" onchange="func_ins()">
      <option value="none" selected >----Select ----</option>
      <option id="1">A</option>
      <option id="2">Others</option>
     </select>
    </td>
  </tr>
  
  
  
  
   <tr id ="trins">
    <td><span>Others</span></td>
    <td><input type="text" id="others_ins"  /></td>
  </tr>
  
  
      <tr>
  
    <td><span>Result:</span></td>
    <td>
     <select id="result" name="result" onchange="func_res()">
      <option value="none" selected >----Select ----</option>
      <option id="1">Grade</option>
      <option id="2"   >Division</option>
     </select>
    </td>
  </tr>
   <tr id ="trgrade">
    <td><span>Grade</span>
    <td><input type="text" id="others_grade" size="5"  /></td>
 </tr>
 
 
 
 <tr id ="trscale">
    <td><span>Scale:</span>
    <td><input type="text" id="others_grade" size="5"  /></td>
 </tr>
 
 
     <tr id="trdiv" onload="func_hid()" >
  
    <td><span>Division:</span></td>
    <td>
     <select id="division" name="division">
      <option value="none" selected >----Select ----</option>
      <option id="1">1st Division</option>
      <option id="2">2nd Division</option>
     </select>
    </td>
  </tr>

  <tr>
    <td  width="1%"><span> Year of Passing:</span></td>
       <td >
     <select id="title" name="title" >
      <option value="none" selected >----Select ----</option>
      <option id="1">2016</option>
      <option id="2">2015</option>
   <option id="3">2014</option>
   <option id="4">2013</option>
    <option id="5">2012</option>
     <option id="6">2011</option>
   <option id="7">2010</option>
   <option id="1">2009</option>
      <option id="2">2008</option>
   <option id="3">2007</option>
   <option id="4">2006</option>
    <option id="5">2005</option>
     <option id="6">2004</option>
   <option id="7">2003</option>
   <option id="1">2002</option>
      <option id="2">2001</option>
   <option id="3">2000</option>
   <option id="4">1999</option>
    <option id="5">1998</option>
     <option id="6">1997</option>
   <option id="7">1996</option>
   <option id="1">1995</option>
      <option id="2">1994</option>
   <option id="3">1993</option>
   <option id="4">1992</option>
    <option id="5">1991</option>
     <option id="6">1990</option>
   <option id="7">1989</option>
     <option id="2">1988</option>
   <option id="3">1987</option>
   <option id="4">1986</option>
    <option id="5">1985</option>
     <option id="6">1984</option>
   <option id="7">1983</option>
    <option id="5">1982</option>
     <option id="6">1981</option>
   <option id="7">1980</option>
   
   
   
     </select>
    </td>
  </tr>
  
  
  
    <tr>
    <td ><span>Duration:</span></td>
    <td ><input name="duration"  type="text" id="name" size="19" class=""/></td>
  </tr>
  
  
  
  
  <tr>
    <td ><span>Achievement:</span></td>
    <td ><input name="achievement"  type="text" id="name" size="19" class=""/></td>
  </tr>
  
  

  
  
 <tr><td> <input type="submit" name="submit" value="submit" />
  </td></tr>
    
   <tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
  </td></tr>
  
  
</table>
</div>
</form>
</body>

有什么办法吗？谢谢 advance.I 希望我能通过你找到我的答案 guys.Thank 你。

Answer 1

我要注意 jQuery 中的 .clone() 方法仅克隆 DOM 元素。为了克隆 JavaScript 个对象，您可以这样做：

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

可以在 jQuery documentation 中找到更多信息。

我还想指出，深拷贝实际上比上面显示的要聪明得多——它能够避免许多陷阱（例如，尝试深扩展 DOM 元素）。它经常在 jQuery 核心和插件中使用，效果很好。

Answer 2

jQuery .clone() 方法还提供了克隆事件的选项。请注意，默认情况下不使用此选项。为了克隆您需要使用的事件：

$(this).clone(true).insertAfter(this);

详情请见 jQuery.clone()

使用 clone() 绑定重复事件

Binding duplicate events by using clone()

html

javascript

jquery

clone