jquery添加/删除html行

Question

我有一个简单的 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>

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

有什么想法吗？

Answer 1

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

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

我在 jsFiddle 上添加了一个 example here，但不得不将你的 img 标签换成一个无法访问你的图片的标签。

Answer 2

新元素没有附加点击处理程序。您可以在每次添加行时重新附加它，方法是执行相同的代码进行初始化，但在单击事件期间。

在此处查看 jsfiddle：http://jsfiddle.net/

Answer 3

你需要使用live()

$('#table1 td img.delete').live('click', function(){ ... });
$("a[name=addRow]").live('click', function (){ ... }); 

Answer 4

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

Answer 5

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

仅将点击处理程序绑定到已经存在的元素。您要么必须在添加新行时将此处理程序绑定到新添加的行，要么通过.delegate 或.live 使用事件委托。