2016-04-25 9 views
2

Ich habe bereits meine HTML-Elemente durch diesen JavaScript-Code dupliziert, aber ich kann die Ereignisse des Codes nicht kopieren.Willst du Gyups bitte beweisen Sie mir die mögliche Lösung.Duplizieren von Ereignissen durch Verwendung von clone()

<script type = "text/javascript" language = "javascript"> 
 
\t 
 
\t 
 
\t function func_addmore(){ 
 
$(document).ready(function() { 
 
      $("div").click(function() { 
 
       $(this).clone().insertAfter(this); 
 
\t \t 
 
      }); 
 
     }); 
 
\t \t 
 
\t } 
 
     </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> 
 
\t <option id="3">HSC</option> 
 
\t <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> 
 
\t </tr> 
 
\t 
 
\t 
 
\t 
 
<tr id ="trscale"> 
 
    <td><span>Scale:</span> 
 
    <td><input type="text" id="others_grade" size="5" /></td> 
 
\t </tr> 
 
\t 
 
\t 
 
    \t <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> 
 
\t <option id="3">2014</option> 
 
\t <option id="4">2013</option> 
 
\t <option id="5">2012</option> 
 
\t  <option id="6">2011</option> 
 
\t \t <option id="7">2010</option> 
 
\t \t <option id="1">2009</option> 
 
     <option id="2">2008</option> 
 
\t <option id="3">2007</option> 
 
\t <option id="4">2006</option> 
 
\t <option id="5">2005</option> 
 
\t  <option id="6">2004</option> 
 
\t \t <option id="7">2003</option> 
 
\t \t <option id="1">2002</option> 
 
     <option id="2">2001</option> 
 
\t <option id="3">2000</option> 
 
\t <option id="4">1999</option> 
 
\t <option id="5">1998</option> 
 
\t  <option id="6">1997</option> 
 
\t \t <option id="7">1996</option> 
 
\t \t <option id="1">1995</option> 
 
     <option id="2">1994</option> 
 
\t <option id="3">1993</option> 
 
\t <option id="4">1992</option> 
 
\t <option id="5">1991</option> 
 
\t  <option id="6">1990</option> 
 
\t \t <option id="7">1989</option> 
 
\t \t <option id="2">1988</option> 
 
\t <option id="3">1987</option> 
 
\t <option id="4">1986</option> 
 
\t <option id="5">1985</option> 
 
\t  <option id="6">1984</option> 
 
\t \t <option id="7">1983</option> 
 
\t \t <option id="5">1982</option> 
 
\t  <option id="6">1981</option> 
 
\t \t <option id="7">1980</option> 
 
\t \t 
 
\t \t 
 
\t \t 
 
    </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>

Gibt es eine Möglichkeit, das zu tun? Vielen Dank im Voraus.Ich hoffe, dass ich meine Antwort durch euch herausfinden werde. Danke.

+0

Sie können Klon nicht klagen. ': P' –

+0

Wenn Sie Ereignisse sagen, meinen Sie die' onchange' usw. Ereignisse auf den div Attributen richtig? – apokryfos

Antwort

0

Die Methode jQuery .clone() bietet die Option, auch Ereignisse zu klonen. Bitte beachten Sie, dass standardmäßig diese Option nicht verwendet wird. Um Ereignisse zu klonen müssen Sie verwenden:

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

Mehr auf jQuery.clone() Detail

+0

wenn ich .clone (true) es onclick Ereignis aufrufen und fügen Sie die gleichen ....

Elemente nacheinander hinzu, aber ich möchte das spezifische Ereignis behandeln basierend auf bestimmten Combobox.Mit dem Weg danke Kumpel für die Antwort ... –

0

Ich möchte darauf hinweisen, dass die .clone() Methode in jQuery nur DOM-Elemente klont. Um JavaScript-Objekte zu klonen, würden Sie tun:

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

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

Weitere Informationen finden Sie im jQuery documentation finden.

Ich möchte auch darauf hinweisen, dass die tiefe Kopie tatsächlich viel schlauer ist als das, was oben gezeigt wird - es ist in der Lage, viele Fallen zu vermeiden (zum Beispiel ein DOM-Element tief zu erweitern). Es wird häufig in jQuery Core und in Plugins mit großer Wirkung verwendet.