我正在尝试创建一个带有按钮的表行,单击该按钮会创建一个新的表行。新行也有相同的“添加行”按钮,我希望能够单击该按钮添加另一行。但我似乎无法将click事件绑定到click事件中附加的元素。我确信我正在使用“on”,但我似乎无法弄清楚如何做到这一点。
http://jsfiddle.net/vivojack/WkfvC/2/
我的(简体)html
<table id="ct">
<tbody>
<tr id="list_items_11" class="list_item">
<td>This Line</td>
<td><input type="button" name="addNewArea" class="addNewArea button" value="+"></td>
</tr>
</tbody>
</table>
我的(简化)javascript
$('#ct tbody tr td').on('click', '.addNewArea', function(event) {
var areaCount = $('#ct tbody tr').length;
var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>';
$(newAreaLine).appendTo('#ct tbody');
$(this).remove();
});
提前致谢。
答案 0 :(得分:4)
您必须将处理程序绑定到不动态的元素。您尝试绑定到td
,但在执行绑定时不存在$('#ct').on('click', '.addNewArea', function(event) {
。您可以改为绑定到表:
{{1}}
答案 1 :(得分:1)
工作演示 http://jsfiddle.net/Z5Vvc/
您可以尝试将其简单地附加到$(document).on(
它现在添加“+”依此类推。如果你热衷的话,Doc链接非常适合阅读。
API doc:.on
- http://api.jquery.com/on/
希望这有助于您的需求:)
<强>码强>
$(document).on('click', '.addNewArea', function(event) {
var areaCount = $('#ct tbody tr').length;
var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>';
$(newAreaLine).appendTo('#ct tbody');
$(this).remove();
});