2

我正在尝试创建一个带有按钮的表格行，单击该按钮会创建一个新的表格行。新行上也有相同的“添加行”按钮，我希望能够单击该按钮来添加另一行。但我似乎无法让 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();
});

提前致谢。

4

2 回答 2

4

您必须将处理程序绑定到非动态元素。您正在尝试绑定到td，在您进行绑定时它不存在。您可以改为绑定到表：

http://jsfiddle.net/TMvN6/

$('#ct').on('click', '.addNewArea', function(event) {
于 2013-10-09T20:51:31.027 回答
1

工作演示 http://jsfiddle.net/Z5Vvc/

您可以尝试简单地将其附加到$(document).on(它现在添加“+”等等。如果您愿意，文档链接非常适合阅读。

API 文档：.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();
});
于 2013-10-09T20:52:20.357 回答