Доступ к DOM-элементам после ajax.load

Question

Я вставляю ответ 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 для обнаружения каких-либо событий щелчка на элементах <li>, и он работает ... Но я не мог понять, как определить, заполняется ли div выводом HTML и, соответственно, изменить один из классов <li>, например ...

$(document).ready тоже не работает ...

Представьте, что мне нужно изменить стиль css второго <li> .. Какое решение для этого?

Answer 1

Как вы проверяете, завершился ли ваш AJAX-вызов? Поскольку он асинхронный, элементы, конечно же, не будут доступны для кода, который выполняется сразу после вашего $.ajax(…) вызова.

Попробуйте манипулировать этими элементами из функции success или из другого кода, который вызывается оттуда - в этот момент вы будете знать, что контент доступен.

Answer 2

похоже, что вы пытаетесь получить доступ к этим элементам до того, как они были созданы, потому что ваш текущий вызов ajax является асинхронным, попробуйте поставить параметр: "асинхронной = ложь" на ваш AJAX, и это должно работать.

Answer 3

Сначала попробуйте следующий код (вместо исходного вызова 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); }
});

Это приведет к появлению сообщения об ошибке в случае сбоя запроса. Если появляется сообщение об ошибке с сообщением об ошибке, запрос не возвращается.

Answer 4

Вы уверены, что ваш фактический запрос был успешным? Если ничего не выбрано, наиболее вероятная причина в том, что вообще ничего не было вставлено в #my_container.