Очень похожая проблема на Динамически добавленные элементы HTML не могут быть найдены с помощью jQuery , но я хочу получить доступ к данным нового элемента, а не его событию.
Элемент добавлен JQueryчерез запрос AJAX.Когда я пытаюсь получить к нему доступ, DOM не пропускает.
<button id="get-data">Get data</button>
<div id="container">
<!-- everything here is added through the first ajax call -->
<button id="update-data">Update</button>
<input type="hidden" id="elem" data-data="someData" />
</div>
Поэтому я попытался:
$('#elem').data('data');
$(this).parents().find('#elem').data('data');
$(document).find('#elem').data('data');
... безуспешно.
Иэто не сработает: JQuery не находит #elem
в DOM:
console.log($('input'));
// OR
console.log($(document).find('input'));
... выводит список input
элементов в DOM, но #elem
равен не в этом списке.
Я предполагаю, что я не могу использовать $().find()
или прямой $()
для получения динамически добавляемого контента, так как я могу его получить?
Вот как организован мой JS:
$(function() {
$('#get-data').click(function() {
$.ajax({
url: "/"
}).done(function() {
$('#container').html(ajaxResult)
});
});
$(document).on('click', '#update-data', function() {
$.ajax({
url: "/new",
data: $('#elem').data('data')
});
//This ajax call doesn't work as expected because data is missing.
//#update-data is inserted by the first AJAX call, but the click even is catched without any problem here.
});
});
Редактировать после дальнейшего исследования:
Я попытался вывести результат различных селекторов JQuery:
$('#container').find('#elem');
JQuery Object (длина: 0) => prevObject: [input # elem]
$('#container').find('#elem').first();
Объект JQuery (длина: 0) => prevObject: Объект JQuery (длина: 0) => prevObject: [input # elem]
$('#elem');
//or
$(document).find('#elem');
//or
$('#container #elem');
JQueryObject (длина: 0) => prevObject: [HTMLDocument my_website.com]
$('#elem').first();
//or
$(document).find('#elem').first();
//or
$('#container #elem').first();
Объект JQuery (длина: 0) => prevObject: Объект JQuery (длина: 0) => prevObject: [HTMLDocument my_website.com]