jQuery предупреждает src изображений, загруженных через ajax. Неопределенная ошибка

#javascript #jquery #ajax

Вопрос:

В диалоговом окне пользовательского интерфейса jquery я загружаю таблицу изображений через ajax. Как только содержимое загружается в диалоговое окно, если я попытаюсь это сделать, я получаю undefined в консоли.

 console.log($('#imageTable tbody tr td img').attr('src'))

Изображения есть, но я просто не могу их прочитать. Этот код должен показать мне src изображения в первом td . Если у меня есть та же таблица с изображениями, которые уже есть в DOM, а не через ajax, тогда команда работает. Я предполагаю, что мне нужен живой способ получить этот контент, поскольку он был получен через ajax и изначально не был в DOM. Как мне это сделать.

Обновленный код — это то, что у меня есть

 $featured = $('<div id="galleryImages"></div>'); 
$('#imageTable tbody tr td img').each(function(){
    var imagesrc = $(this).attr('src');
    $featured.append('<img src="' imagesrc '" />')
}); 
console.log($featured);

1. Вы ждете завершения команды ajax? Это асинхронная операция, поэтому вам нужно подключить обработчик успеха, чтобы узнать, когда это действительно сделано, и, таким образом, вы можете просмотреть вставленный в него контент.

2. @jfriend00 Нет, я жду, пока загрузится ajax. Содержимое есть, потому что я его вижу. я обновил свой вопрос, чтобы показать код для получения всех изображений

3. Я не уверен, что вы поняли мой вопрос ajax. Вы вызываете этот код из обработчика успеха ajax? Можете ли вы показать свой код ajax? Если ваш код выполняется немного раньше, чем вызов ajax фактически завершен, он ничего не найдет.

4. @jfriend00 В настоящее время я запускаю код вручную в консоли после загрузки содержимого. Так что это не должно быть проблемой

5. Затем покажите нам фактический HTML. Здесь мы летим вслепую, пытаясь помочь вам найти что-то в вашем HTML, не зная, что такое фактический HTML.

Ответ №1:

Вы могли бы попробовать $("#imageTable").find("img").attr("src");

Он найдет любые изображения в таблице.

1. Отлично, это работает в консоли… Но как мне применить это к каждой функции, которую я должен получить, чтобы получить все изображения $featured = $('<div id="galleryImages" class="abs agallery"></div>'); $('#imageTable tbody tr td img').each(function(){ var imagesrc = $(this).attr('src'); $featured.append('<img src="' imagesrc '" />') }); console.log($featured)

2. Все, что вам нужно сделать, я бы использовал .each() вместо .attr() в примере, который я опубликовал. Если вам нужно дождаться завершения Ajax, вы можете поместить его в onSuccess обработчик.

3. Что вы имеете в виду, используя each вместо attr. Проблема не в ожидании завершения ajax. Я пытаюсь использовать свой код в консоли после загрузки ajax

4. Хорошо, я заставил его работать $('#imageTable').find('img').each(function(){... , но почему бы ему не работать $('#imageTable tbody').find('img').each(function(){... , если у меня есть изображения вне тела, я не хочу, чтобы они были выбраны.

5. Я заставил его работать с помощью $('#imageTable').find('tbody tr td img').each(function(){... . Не знаю, почему это не сработало бы по-другому. Спасибо. Ваш ответ помог мне решить эту проблему.