2009-09-25 84 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