使用clone()

时间:2016-04-25 11:44:15

标签: javascript jquery html html5 clone

我已经通过这个javascript代码复制了我的html元素,但是我无法复制代码的事件。请问gyups请证明我可能的解决方案。  



 <script type = "text/javascript" language = "javascript">
	 
	 
	 function func_addmore(){
 $(document).ready(function() {
            $("div").click(function () {
               $(this).clone().insertAfter(this);
		
            });
         });
		 
	 }
      </script>
&#13;
 <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>
&#13;
&#13;
&#13;

有没有办法做到这一点?提前谢谢。我希望我能通过你们找到答案。谢谢。

2 个答案:

答案 0 :(得分:0)

我想要注意 jQuery 中的.clone()方法只能克隆DOM元素。要克隆JavaScript对象,您可以执行以下操作:

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

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

更多信息可在jQuery documentation

中找到

我还想要注意,深拷贝实际上比上面显示的更聪明 - 它能够避免许多陷阱(例如,尝试深度扩展DOM元素)。它经常在jQuery核心和插件中使用,效果很好。

答案 1 :(得分:0)

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

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

jQuery.clone()

的详细信息