如何讓新添加按鈕運行

Question

傢伙我嘗試做一個動態的設計，增加學生一類的按鈕添加在第10行！[在這裏輸入的形象描述] [1]

http://www.facebook.com/photo.php?fbid=4099710263250&set=a.1210298669766.32621.1597725369&type=3&theater

我可以附加一個新的行上有一個按鈕，但是當我點擊新的按鈕時，點擊功能沒有響應，我仍然需要點擊第10行上的添加按鈕來添加新的按鈕。

這裏是代碼。

  <table> 
      <th colspan="4"><h2>Boys</h2></th> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname1" class="input"> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname1" class="input"> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname1" class="input"> 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname2" class="input"> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname2" class="input"> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname2" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname3" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname3" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname3" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname4" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname4" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname4" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname5" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname5" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname5" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname6" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname6" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname6" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname7" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname7" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname7" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname8" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname8" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname8" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname9" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname9" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname9" class="input" > 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <label>Name:</label> 
       </td> 
       <td> 
       <input type="text" name="bstudnt_lname10" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_mname10" class="input" > 
       </td> 
       <td> 
       <input type="text" name="bstudnt_fname10" class="input" > 

       <input type="button" id="" name="add_bstudent" class="button add-  bstudent" value="+"> 
       </td> 
      </tr>    
      </table> 

JS ....

$('.add-bstudent').click(function() { 
    $(this).parent().parent().after("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>"); 
}); 

Answer 1

當你使用點擊（）函數來註冊事件，只會登記簿的那一刻選擇返回的對象的事件。如果在事實之後創建對象，則它不會綁定到事件。使用on（）函數，並給它您的選擇：http://api.jquery.com/on/

例子：

$('#container').on('click', '.add-bstudent', function(event) { ... });

Answer 2

我注意到的第一件事情是，你不要被$('.add-bstudent')名稱與類的按鈕。 這是該按鈕的名稱屬性.. 也可以考慮使用。對（），以便當元素可用的情況下連接委派事件

Answer 3

試試這個

$('.add-bstudent').click(function() { 
     $(this).parent('table').append("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>"); 
    });