Выберите элементы DOM в jQuery - динамически добавлено

Question

В jQuery вы можете использовать .live(), .on() и .delegate() для привязки событий к элементам DOM, которые еще не добавлены на страницу.

Возможно ли использовать подобную технику для выбора элементов DOM, которые еще не добавлены для применения некоторых функций?

Например, я хочу выбрать все элементы ввода, имеющие класс .req, и включить водяной знак «Требуется».

Я уже использую плагин jquery для создания водяного знака, но не могу работать с элементами DOM, добавленными динамически на страницу.

Answer 1

Вы можете использовать mutation events (DOMNodeInserted), но они устарели.
Так что если вы хотите использовать их, или тянуть DOM каждый раз, когда X, ответа никакого

Натяжения пути:

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

Answer 2

К сожалению, нет. Делегирование событий работает только потому, что вы технически привязаны к узлам DOM, которые уже присутствуют, поэтому не имеет значения, что элементы, которые в конечном счете запускают событие, пока не существуют. На пути есть (и уже реализованы в некоторых браузерах) события уровня DOM-уровня, которые позволят вам реагировать на создание новых узлов DOM или существующих манипуляций, но пока поддержка браузера не будет лучше, на самом деле нет никаких вариантов кроме повторного опроса DOM для новых узлов, что является ужасно неэффективным.

Answer 3

Ответ: это зависит от того, как вы вставляете элементы в DOM. Если вы вставляете их через jQuery, вы можете использовать плагин, такой как livequery. Как вы можете see, он подключается к основным методам манипуляции, и в любое время они называются запусками обратных вызовов, зарегистрированных в реальном времени. Если вы вставляете элементы через vanilla JS, то, как утверждали другие, события Momatation DOM являются устаревшими и ненадежными, поэтому опрос будет вашим лучшим вариантом.

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");