在jQuery中選擇DOM元素 - 動態添加

Question

在jQuery中，您可以使用.live(),.on()和.delegate()將事件綁定到頁面上尚未添加的DOM元素。

是否可以使用類似的技術來選擇尚未添加的DOM元素以應用某些功能？

例如，我想選擇所有具有.req類的輸入元素，幷包含一個名爲「Required」的水印。

我已經使用jquery插件來做水印，但不能在動態添加到頁面上的DOM元素上工作。

Answer 1

您可以使用mutation events（DOMNodeInserted），但它們已被棄用。
所以，除非你想使用它們或拉DOM每X時間，答案是NO

拉動方式：

setInterval(function(){ 
    // Do what you want here. 
    $('.req').watermark("Required"); 
}, 500); // evey half a second. 

Answer 2

不幸的是，沒有。事件委託僅適用於您在技術上綁定到已存在的DOM節點，因此最終觸發事件的元素還不存在並不重要。在途中有DOM級別的2級事件（並且已經在一些瀏覽器中實現），它們可以讓您對正在創建的新DOM節點或正在操作的現有DOM節點做出反應，但在瀏覽器支持更好之前，沒有任何選項除了反覆輪詢DOM新節點，這是非常低效的。

Answer 3

答案是，它取決於你如何在DOM中插入元素。如果你通過jQuery插入它們，那麼你可以使用一個插件，如livequery。正如你可以see，它掛鉤到核心操作方法，並且任何時候它們被調用，它都會運行在實時查詢中註冊的回調函數。如果您通過vanilla JS插入元素，然後如其他人所說，DOM muatation事件已被棄用且不可靠，因此投票將是您的最佳選擇。

Answer 4

我知道這個帖子是舊的，但我相信這可以通過使用jQuery find方法來完成。

http://jsfiddle.net/vreTG/1/

// Generate some dynamic content 
var dyn = '<ul>'; 
dyn += '<li class="req">Name</li>'; 
dyn += '<li class="req">Address</li>'; 
dyn += '<li class="opt">Phone Number</li>'; 
dyn += '<ul>'; 

// Add to DOM 
$("#container").html(dyn); 

// Find required fields 
$("#container").find(".req") 
    .prepend("* ") 
    .css("color", "#900");