2009-09-25 75 views
14

我需要通过给定的CSS选择器将事件侦听器绑定到所有动态创建的元素。jQuery live函数的原型相当于

在jQuery中,这将是

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

是否有任何相当于原型这个?

回答

21

这通常是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() 
    } 
}); 
+0

最优秀。谢谢!我发现的文档提到只有一个tagName被允许,而不是一个CSS选择器。然而,看看Prototype源确实确实允许使用CSS选择器。 – mynameistechno 2011-01-31 18:48:22

+0

那么,这不完全等同于jQuery。这绑定到文档点击并找到事件,而我相信jQuery触发DOM更改并将事件绑定到新元素。 jQuery **可能在做这样的事情,但是从jQuery 1.4开始,它支持像悬停这样的事件,所以我认为它不是*在封面下做这样的事情,即使它一次没有。 – cgp 2011-05-24 18:34:50

+0

@altCognito,不过这几乎是jQuery如何在引入“live”的情况下进行实时绑定。 jQuery可以将处理程序绑定到“文档”,以便不会本机传播的事件,因为jQuery将手动创建和传播此类事件。 – jangosteve 2011-11-07 21:30:34

13

的正确答案的问题是在这里:http://gurde.com/2011/08/jquery-live-in-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关键字将始终引用原始元素(在本例中为document) 。

+0

要求/抱怨的正确位置是meta。可能被删除,因为这是一个只是一个链接的答案,但没有理由可见。 – 2011-08-07 06:41:57

+1

看到我的编辑和http://stackoverflow.com/questions/how-to-answer – 2011-08-07 08:51:00

+0

我确实相信链接的例子是错误的。没有'document.on(...)',相反,你必须以同样的方式使用'Event.on(document,...)'。 – clockworkgeek 2011-08-07 10:53:53