Question

我有一个包含多行（）的表，我使用jQuery append（）向表中添加一行。然后我尝试使用remove（）删除该行，该行与原始行一起正常工作，然后失败。

请帮忙。感谢。

<table id="mybbbb" border="1" style="width:300px"><tbody>
    <tr><td>some text</td><td><div class="linksd">delete</div></td></tr>
    <tr><td>some text</td><td><div class="linksd">delete</div></td></tr>
    <tr><td>some text</td><td><div class="linksd">delete</div></td></tr>
    <tr><td>some text</td><td><div class="linksd">delete</div></td></tr>
</tbody></table>

<div id="addRow">add row</div>

<script>
jQuery("#addRow").click(function(event){
    event.preventDefault();
    jQuery("#mybbbb > tbody:last").append("<tr><td>more text</td><td><div class='linksd'>delete</div></td></tr>");
});

jQuery(".linksd").click(function(event){
            event.preventDefault();
            jQuery(this).parent().parent().remove();
            return false;
});
</script>

Answer 1

您的问题是，在分配Javascript事件侦听器时，DOM中不存在新创建的行。

对于jQuery 1.6（在你的小提琴中使用），你可以使用live来监听原始的DOM创建点：

$('.linksd').live('click', function(event){

对于更现代的jQuery版本（live现已弃用），您应该使用on委派：

$(document).on('click', '.linksd', function(event){

fixed fiddle中的示例并更改jQuery版本以查看。

Answer 2

点击div没有默认行为。

从代码中删除event.preventDefault();和return false，对我有用。

jQuery(".linksd").click(function(event){   
    jQuery(this).parent().parent().remove();   
});

演示：jsfiddle

无法删除（）行append（）到表

2 个答案: