家伙我尝试做一个动态的设计,增加学生一类的按钮添加在第10行![在这里输入的形象描述] [1]如何让新添加按钮运行
我可以附加一个新的行上有一个按钮,但是当我点击新的按钮时,点击功能没有响应,我仍然需要点击第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>");
});
的http:// jsfiddle.net/GNKpB/ – undefined
@undefined很好的例子,但是我会建议给初始$函数一个容器DOM元素,而不是文档,这样事件就不必通过DOM一路冒泡。它还包含该容器内的事件绑定,以防在页面中的其他位置使用不同的功能。 –