Javascript jquery添加/删除html行

我有一个简单的html表，我想在其中动态删除和添加行。html表有一个删除图标，通过单击该图标，jquery脚本将删除该行。
表的代码：

<table id="table1"><tr><td>
<img class="delete" alt="delete" src="delete_icon.png" />
</td></tr></table>

链接将添加新行：

<a href="#" name="addRow">Add Row</a>

html表代码上方的两个jquery脚本：

<script type="text/javascript">
    /* delete row */
    $(document).ready(function () {
        $('#table1 td img.delete').click(function () {
            $(this).parent().parent().remove();
        });
    });

    /* add new row */
    $(document).ready(function () {
        // Code between here will only run when the document is ready
        $("a[name=addRow]").click(function () {
            // Code between here will only run when the a link is clicked and has a name of addRow
            $("table#table1 tr:last").after('<tr><td><img class="delete" alt="delete" src="@Url.Content("~/content/delete_icon.png")" /></td></tr>');
            return false;
        });
    });

</script>

/*删除行*/
$（文档）.ready（函数（）{
$（'#表1 td img.delete'）。单击（函数（）{
$（this.parent（）.parent（）.remove（）；
});
});
/*添加新行*/
$（文档）.ready（函数（）{
//此处之间的代码仅在文档准备就绪时运行
$（“a[name=addRow]”）。单击（函数（）{
//此处之间的代码仅在单击a链接且名称为addRow时运行
$（“表1 tr:last”）。在（“”）之后；
返回false；
});
});

问题如下：删除和插入操作都起作用。但是，当我添加新行并尝试删除该行时，什么也没有发生。我只能删除已经存在的行，jquery脚本不能处理新添加的行

有什么想法吗

$('#table1 td img.delete').click(function () {

仅将单击处理程序绑定到已存在的元素。您必须在添加新添加的行时将此处理程序绑定到这些行，或者通过或使用事件委派

---

仅将单击处理程序绑定到已存在的元素。您必须在添加新添加的行时将此处理程序绑定到这些行，或者通过或使用事件委派。

这是因为新添加的行没有将单击事件处理程序附加到删除链接。您必须在创建新行时手动添加它，或者使用它将自动将事件附加到新创建的DOM节点。

这是因为新添加的行没有将单击事件处理程序附加到删除链接。创建新行时，您必须手动添加它，或者使用它将自动将事件附加到新创建的DOM节点。

您需要使用

live（）

您需要使用

live（）

---

新元素未附加单击处理程序。您可以在每次添加行时通过执行相同的代码进行初始化（但在单击事件期间）来重新附加该行

---

请参见此处的JSFIDLE:

新元素没有附加单击处理程序。您可以在每次添加行时通过执行相同的代码进行初始化（但在单击事件期间）来重新附加该行

请参见此处的JSFIDLE:

您需要使用函数将事件绑定到尚未引入DOM的元素

$(document).ready(function() {
    $('#table1 td .delete').live('click', function() {
        $(this).parent().parent().remove();
    });
});

我在JSFIDLE上添加了一个，但不得不将img标记替换为一个无法访问图像的标记。

您需要使用一个函数，该函数允许您将事件绑定到尚未引入DOM的元素

$(document).ready(function() {
    $('#table1 td .delete').live('click', function() {
        $(this).parent().parent().remove();
    });
});

---

我在JSFIDLE上添加了一个，但不得不将您的img标记替换为一个无法访问您的图像的标记。

谢谢，这似乎就是问题所在。我是jquery新手，您能在本例中演示如何将单击处理程序绑定到新元素吗？谢谢@kmb：如果将

.click（

替换为

.live（“click”），

它应该可以工作。但这不是最有效的解决方案，因为它必须检查每个单击事件，无论发生在何处；使用

.delegate

（请参阅我链接的文档），您可以将其约束为表内的单击。谢谢，这似乎是个问题。我是jquery新手，您能否在本例中演示如何将单击处理程序绑定到新元素？谢谢！@kmb:如果您替换

。单击（

by

.live（“单击”），

它应该可以工作。但这不是最有效的解决方案，因为它必须检查每个单击事件，无论发生在哪里；使用

.delegate

（请参阅我链接的文档），您可以将其限制为表内的单击。