2016-04-25 10 views
2

私はすでにこのjavascriptコードでHTML要素を複製していますが、コードのイベントをコピーできません。gyupsあなたは私に可能な解決策を教えてください。 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>

それをする方法はありますか?事前に感謝します。私はあなたの間で私の答えを見つけることを願っています。ありがとう。

+0

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

もっと詳しく:あなたが使用する必要があるイベントをクローン化するために。 ':P' –

+0

イベントを言うときは、div属性の' onchange'などのイベントを意味しますか? – apokryfos

答えて

0

jQuery .clone()メソッドは、イベントを複製するオプションも提供します。デフォルトでこのオプションは使用されていないことに注意してください。あなたはクローンを訴えることはできませんjQuery.clone()

+0

.clone(true)を使用すると、onclickイベントが呼び出され、同じ....

要素が連続して追加されますが、特定のコンボボックスに基づいて特定のイベントハンドルを実行したいと思います。 –

0

.clone()メソッドは、のjQueryのクローンDOM要素のみに注意してください。 JavaScriptオブジェクトのクローンを作成するためには、あなたはどうなる:

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

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

詳しい情報はjQuery documentationで見つけることができます。

深いコピーは、実際には上記のものよりもはるかに賢明であることに注意してください。トラップを避けることができます(たとえば、DOM要素を深く拡張しようとするなど)。これはjQueryコアとプラグインで頻繁に使用されています。

関連する問題