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

您需要使用live()

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

我在jsFiddle上添加了example here但是必须将你的img标签换成无法访问你图片的标签。

Answer 5

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

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

jquery添加/删除html行

5 个答案: