Сбой селектора jquery на загруженном содержимом ajax

Question

У меня есть диалог, который загружается через AJAX. Paylaod этого AJAX содержит как HTML, так и JavaScript.

Диалоговое окно отображается очень хорошо, и JS, включенный в эту полезную нагрузку, выполняется.

Однако я не могу выбрать какие-либо элементы (будь то по идентификатору, классу или типу элемента) из JS в полезной нагрузке.

допустим, полезная нагрузка имела:

<div>
   <ul id="testid">
     <li>A</li>
     <li>B</li>
   </ul>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        console.info('test: ' + $("#testid").length);
    });
</script>

Это приводит к тесту: 0 появляется в консоли.

Если я изменю селектор на "body", это приведет к ненулевому значению.

Очевидно, что загруженный контент отображается, и JS, который он содержит, выполняется, и я понимаю, что вызов.ready() должен позволить обновлять время DOM, чтобы включить полезную нагрузку html.

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

Странно то, что другие загруженные ajax-страницы, у которых есть JS, который выбирает элементы в загруженной ajax-загрузке, работают - это просто диалог, который (пока) не работает.

Я в некотором недоумении относительно того, почему только это идет не так. Я провел тщательную проверку и искал в Google и т. Д. Последние пару дней без решения, поэтому подумал, что я буду просить о помощи здесь.

Джейсон

Answer 1

Я верю ready работает только при первой загрузке страницы. Если вы зависите от результата вызова AJAX, вам необходимо использовать обратный вызов, поскольку операция является асинхронной. Zotonic предлагает вам какие-нибудь крючки, которые вы можете использовать? В противном случае это будет немного сложнее. Возможно, вы можете опросить DOM следующим образом при загрузке страницы:

<script type="text/javascript">
    $(document).ready(function() {
        var interval = setInterval(function() {           
            if($("#testid").length > 0) {
               clearInterval(interval);
               console.info('test: ' + $("#testid").length);
            }
        }, 750);
    });
</script>

Это будет запрашивать страницу каждые 750 мс для #testid, Если он находит элемент, интервал отменяется, и вы должны получить консольный вывод.