Доступ к DOM-элементам после ajax.load
-
03-07-2019 - |
Вопрос
Я вставляю ответ HTML от вызова AJAX на свою страницу, но затем, когда я пытаюсь получить доступ к этим элементам после того, как они были созданы, происходит сбой.
Вот так я извлекаю и вставляю HTML:
$.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
success: function(outData) {$('#my_container').html(outData);}
})
Исходный HTML-код, который вставляется в <div>
(id = my_container
), выглядит следующим образом:
<div id="my_container">
<ul>
<li id="578" class="notselected">milk</li>
<li id="579" class="notselected">ice cream</li>
<li id="580" class="selected">chewing gum</li>
</ul>
</div>
... и потом, когда я пытаюсь получить доступ к любому из элементов <li>
, используя такие запросы:
$('#my_container li:first')
или
$('#my_container ul:first-child')
или аналогичные, ничего не выделено.
Я использую плагин Listen для обнаружения любых событий щелчка на элементах $(document).ready
и это работает ... Но я не мог понять, как определить, заполнен ли div выходным HTML, и соответственно изменить один из классов <=>, например ...
<=> тоже не работает ...
Представьте, что мне нужно изменить стиль css второго <=> .. как это можно решить?
Решение
Как вы проверяете, завершился ли ваш AJAX-вызов? Поскольку он асинхронный, элементы, конечно же, не будут доступны для кода, который выполняется сразу после вашего вызова $.ajax(…)
.
Попробуйте манипулировать этими элементами из функции success
или из другого кода, который вызывается оттуда & # 8212; в этот момент вы будете знать, что контент доступен.
Другие советы
Вы уверены, что ваш фактический запрос успешно выполнен? Если ничего не выбрано, наиболее вероятная причина в том, что вообще ничего не было вставлено в #my_container.
Сначала попробуйте следующий код (вместо исходного вызова AJAX, который вы показали):
var html = $.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
async: false
}).responseText;
$('#my_container').html(html);
Если это работает, ваш селектор li:first
просто вызывается до завершения запроса AJAX. Если это не сработает, попробуйте следующий код:
$.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
success: function(outData) { $('#my_container').html(outData); },
error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});
Это приведет к появлению сообщения об ошибке в случае сбоя запроса. Если появляется сообщение об ошибке с сообщением об ошибке, запрос не возвращается.
похоже, что вы пытаетесь получить доступ к этим элементам до того, как они были созданы, потому что ваш текущий вызов ajax является асинхронным, попробуйте поставить параметр: <Сильный> Quot &; Асинхронной = ложь Quot &; Сильный> на ваш AJAX, и это должно работать.