jQuery live函数的原型等效物是什么？

Question

我需要将事件监听器绑定到所有通过给定CSS选择器动态创建的元素上。

在jQuery中，可以这样实现：

$(".foo").live("click", function(e) {
   // bar
});

在 Prototype 中是否有与此相当的方法？

- Jakub Arnold

Answer 1

通常使用Event#findElement来完成此操作：

document.observe('click', function(e, el) {
  if (el = e.findElement('.foo')) {
    // there's your `el`
    // might want to stop event at this point - e.stop()
  }
});

- kangax

---

非常好。谢谢！我找到的文档提到只允许使用tagName，而不是CSS选择器。然而，查看Prototype源代码确实证实了CSS选择器是被允许的。 - mynameistechno

好吧，这并不完全等同于jQuery。它绑定到文档点击并查找事件，而我认为jQuery会在DOM更改时触发并将事件绑定到新元素。可能jQuery曾经在幕后做过类似的事情，但是自从jQuery 1.4以来，它支持像hover这样的事件，因此即使它曾经这样做过，我想现在也不再这样做了。 - cgp

@altCognito，这基本上就是自从live被引入以来，jQuery在实时绑定方面的工作原理。jQuery可以将处理程序绑定到document上，用于不会自然传播的事件，因为jQuery会手动创建和传播此类事件。 - jangosteve

@Slomojo，那不是语法错误。el需要被赋值，而不是被比较 :) - kangax

抱歉，已还原。在这种情况下，我不明白您如何确定所点击的元素是您想要的那个。 - ocodo

e.findElement（'...'） 搜索您单击的元素的祖先树，直到找到满足查询条件的元素。结果被分配给一个元素。如果没有分配任何内容（=从未找到元素），则不会进入条件块。 - kangax

Answer 2

这个问题的正确答案在这里：http://gurde.com/2011/08/jquery-live-in-prototype/

在Prototype中，等价于jQuery的.live()方法是使用Event.on()方法：

var handler = document.on(
    'click',
    'div[id^="post-"] .attached-post-thumbnail',
    function(event, element) {
        console.log(this);
        console.log(element);
    }.bind(this)
);

handler.stop();
handler.start();

在回调函数中，this 关键字将始终引用原始元素（在本例中为文档）。

- robert

---

我认为链接的示例是错误的。没有 document.on(...)，相反你需要以同样的方式使用 Event.on(document, ...)。 - clockworkgeek

@clockworkgreek，是的，有这个东西。如果它不存在，我就不会写关于它的内容了。 - robert

@robert，抱歉。我正在检查api.prototypejs.org，并且document.on没有列出来，在控制台中检查时返回undefined。原来Prototype 1.7的网站正在运行Prototype 1.6！我不得不检查源代码才找到它被定义了。 - clockworkgeek