Подтвердить что ты не робот

Селектор JQuery на динамически добавленном элементе

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

Например:

Если у меня есть HTML:

<div id="bar">
 World!
</div>

Затем я создаю новый элемент и вставляю его в DOM:

var foo = '<div id="foo">Hello</div>';
$("#bar").before(foo);

В итоге я получаю следующее:

<div id="foo">Hello</div>
<div id="bar">
 World!
</div>

Позже я могу захотеть сделать что-то другое с вставленным мной элементом, используя JQuery для управления этим новым элементом. Но если я попытаюсь сделать:

myHappyEl = $("#foo");

Тогда myHappyEl будет undefined. JQuery не видит этого, предположительно потому, что он подключается после загрузки DOM.

Я видел много предложений, касающихся возможной, но очень тонкой проблемы, в которой решение должно использовать .live()/. on(), чтобы присоединить прослушиватель событий, когда элемент входит. Это было бы блестящим, если бы я хотел захватить событие щелчка или что-то в этом роде, но я этого не делаю; Я хочу иметь возможность выбирать динамически добавленные элементы.

4b9b3361

Ответ 1

Вам придется назначить эту переменную после того, как элемент был вставлен, например:

var myHappyEl = $("#foo"); //Nothing, it isnt there
var foo = '<div id="foo">Hello</div>';
$("#bar").before($(foo));
myHappyEl = $("#foo");

В противном случае элемент не существует на странице.