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