ajax加载内容上的jquery选择器失败

Question

我有一个通过 ajax 加载的对话框。该ajax 的paylaod 包含html 和javascript。

对话框显示得很好，并且该有效负载中包含的 JS 会执行。

但是，我无法从负载中的 JS 中选择任何元素（无论是通过 id、类还是元素类型）。

假设有效载荷有：

<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>

这会导致 test: 0 出现在控制台中。

如果我将选择器更改为在“body”上进行选择，那么它会产生一个非零值。

显然加载的内容正在显示，其中包含的 JS 正在执行，我的理解是 .ready() 调用应该允许更新 DOM 时间以包含 html 有效负载。

不幸的是，在这种情况下，我无法直接控制 ajax 加载本身，因为我使用的是为我执行对话框功能的框架（zotonic）。

奇怪的是，我拥有的其他 ajax 加载页面具有选择 ajax 加载负载中的元素的 JS 正在工作 - 它只是（到目前为止）似乎失败的对话框内容。

我有点不知所措，为什么这会出错。在过去的几天里，我已经完成了尽职调查并搜索了谷歌等，但没有任何解决方案，所以我想在这里大声寻求帮助。

杰森

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。如果找到该元素，则取消间隔，您应该得到控制台输出。