Question

我有4行的表格，当我点击任何一行时，在我点击的行之后会添加一个新的行。在这里我给我的代码只是为了展示我是如何用jquery实现的。

我的jquery，我在我点击的行之后添加了一个新行。

$(document).ready(function () {
        $("table#Table1 tr").click(function () {
            var $tr = $(this).closest('tr');
            var myRow = ($tr.index() + (++counter));
            $(this).after("<tr ><td>" + myRow + ")&nbsp;</td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");

        });

}）;

问题是我正在使用jquery添加新行但是click事件没有附加new。所以请引导我找到用新行附加点击事件的最佳方法。

Answer 1

尝试更改 -

$("table#Table1 tr").click(function () {

到

$('table#Table1 tr').live('click', function() {

这应该确保jQuery将click事件绑定到所有表行，包括那些动态创建的表。

工作演示 - http://jsfiddle.net/w5Atk/

Answer 2

您想使用.live(..)绑定事件。这将允许动态生成的DOM元素使用相同的事件。

$("table#Table1 tr").live( 'click', function () {
            var $tr = $(this).closest('tr');
            var myRow = ($tr.index() + (++counter));
            $(this).after("<tr ><td>" + myRow + ")&nbsp;</td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");

        });

Answer 3

尝试$ .fn.delegate

http://api.jquery.com/delegate/

借助jquery在动态内容中附加事件

3 个答案: