jquery - $("#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
});

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

document.getElementById 正在获取当前存在的元素。当你通过 live 传递一个字符串“#id”时，jQuery 会在 document.body 上寻找未来的事件，这些事件源自一个 ID 与该字符串匹配的元素。

作为旁注，请查看 .on() ，因为 .live() 不仅计算成本高，而且已弃用。

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

写作$(element).live()不会做任何事情，因为没有选择器。

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

6 回答 6