为什么jQuery.live函数不能与静态元素一起使用？

Question

我有一个动态HTML表格，我可以在其中添加和删除行。 每行包含一个类removeRow的按钮。

在我的JavaScript中，我有：

$('button.removeRow').live("click", function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

问题在于它适用于所有属于在加载页面后插入的行的按钮（通过单击“添加行”按钮）。

它适用于现有按钮，只有当我将上述代码更改为（但它不适用于动态添加的行）时：

$('button.removeRow').click(function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

我认为实时功能应该适用于两者，所以你能指出我正确的方向吗？它哪里出错？

Answer 1

好的我今天发现了一个错误。在我的代码的某处，我有：

$('input[type=submit], button').click(function () {
            return false;
});

我希望它能够使用提交按钮，因此它不会在点击时提交表单。我不记得为什么我把按钮放在那里。无论如何，因为我的静态按钮点击附加了这个事件，而动态创建的那些没有。因此，实时“点击”适用于动态按钮。愚蠢的错误......

Answer 2

Hacky解决方案：同时执行

$('button.removeRow').live("click", function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

和

$('button.removeRow').click(function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

如果您发布了一些示例HTML以及负责插入新行的代码，那将会很有帮助。

Answer 3

如果您的.parents()选择器匹配其他tr元素，可能会出现问题。试试.closest()：

$('button.removeRow').live("click", function(){  
  $(this).closest('tr').remove();
  return false;
});

Answer 4

live应该适用于动态和预渲染元素。

我首先要确定在运行jQuery之前该内容是否真的存在...尝试在某处输出以下结果，或使用debugger关键字，甚至是可怕的{{1} }：

alert