JQuery: невозможно выбрать только добавленный элемент

Это то, что происходит при событии:

$('div#pages').append($('<div class="page" id="test">...</div>'));

И затем, в другом случае это не удается:

var page = $('div.page#test'); // returns empty array

Я отлаживал, и добавленный html появляется в структуре документа после добавления, но не может быть выбран. Выполнение этого же в консоли браузера отлично работает.
В чем может быть проблема?

Ответ 1

Используйте .find() http://api.jquery.com/find

var page = $('div#pages').find('div.page#test');

Ответ 2

Имел ту же проблему, обнаружил, что если бы я добавил слушателя перед добавлением div, он не нашел бы div. Не забудьте добавить слушателя после создания объекта.

Ответ 3

Мне пришлось использовать хак, чтобы обойти эту проблему недавно, когда я динамически вставлял элементы <select>. Я изменил это:

var $item = $('#appendedItem1'); // returns: []

var $item = $(document.getElementById('appendedItem1')); // returns: [select#appendedItem1]

Я знаю, что похоже, что это должно быть то же самое, но работает только второй.

Ответ 4

пропущенные кавычки в имени класса page

Также пропустили ) для append()

Должно быть

    $('div#pages').append($('<div class="page" id="test">...</div>'));

вместо

$('div#pages').append($('<div class=page id="test">...</div>');