$( "#element" ) 和 $(document.getElementById( "element" ))之间的区别？

Question

我在jQuery（v1.7）中遇到了一些奇怪的行为：

我正在尝试将事件侦听器设置为一个元素，该元素实际上在某个时候通过 ajax 被替换。

$(document.getElementById('element')).live('click', function() {
    // do something on click
});

虽然这适用于其他方法，但 live 方法拒绝运行。当用本机jQuery选择器替换它时，它可以工作。为什么？

$("#element").live('click', function() {
    // do something on click
}); 

Answer 1

live不是

这样工作的。事件冒泡到文档，然后检查事件的target以查看它是否与选择器匹配。

绑定

事件处理程序时，侦听事件的元素可能不存在，因此getElementById不返回任何内容。

当您考虑live的语义时，向其传递 DOM 元素是没有意义的。

Answer 2

document.getElementById 正在抓取当前存在的元素。当你用live传递字符串"#id"时，jQuery会在document.body上查找将来的事件，这些事件源自ID与该字符串匹配的元素。

作为旁注，将 .on（） 视为 .live（） 不仅计算成本高昂，而且已弃用。

Answer 3

我相当确定在第一种情况下，您将一个简单的节点传递给 jQuery 构造函数，这意味着一旦该节点消失，该对象将不再引用任何内容，因此live无法工作。

另一方面，通过向它传递jQuery选择器，live可以不断查找具有该ID的元素，即使它被删除，重新添加或以其他方式踢来踢去。

Answer 4

.live()过滤所有单击事件，以查看哪些事件与您从中创建jQuery对象的选择器匹配。
它与 jQuery 对象中的当前元素无关。

编写$(element).live()不会执行任何操作，因为没有选择器。

Answer 5

因为live会将实际事件附加到文档中，这称为委派。

然后，当发生单击时，jQuery 会检查选择器中的元素是否是事件的起源，如果是，则调用您的函数。

虽然 $（"#element"） 可以查看是否有与选择器匹配的元素，但$(document.getElementById("element));不能，因为没有选择器，只有一个对象，删除它后会丢失。

Answer 6

原生 JavaScript getElementById 为您提供实际的 DOM 对象，而 jquery 选择器为您提供围绕对象的 jquery 包装器。

我认为.live需要一个jquery包装器才能工作。

此外，您应该使用 .on 或 .delegate，因为 .live 已从 1.7 开始被弃用