在 div 中实现 jQuery，该 div 包含刚刚用 jQuery 的 .load() 加载的内容答案

【问题标题】：Implementing jQuery inside a div that has content which was just loaded with jQuery's .load()在 div 中实现 jQuery，该 div 包含刚刚用 jQuery 的 .load() 加载的内容
【发布时间】：2023-04-02 17:03:01
【问题描述】：

我有一个使用 jQuery 使用 .load() 刷新的 div。一旦它被刷新，新的内容就会出现在 div 中。然而，新内容里面有 jQuery，它不工作，即使当内容加载到它自己的页面上时它确实工作。

div 也在父窗口中，但是刷新 div 的 jQuery 代码在 iframe 中。代码调用top.document（父窗口）刷新iframe外的div。

我将在这里展示完整的代码：

这是名为 test.php 的主页。它只有一个简单的 iframe，下面是当代码告诉它在 iframe 中时刷新的 div。

<html>
<head>
</head>
<body >
<iframe src="test2.php" width="400" height="400" frameborder="3"></iframe>
<div id="target">This text will be replaced.</div>
</body>
</html>

这是 iframe 内的 test2.php，它只是 iframe 的开始页面，因此您可以方便地按下一个链接，该链接将激活下一页，当页面加载时打开 jQuery 代码。

<html>
<head>
</head>
<body>
<a href="test3.php">Click Me, if the div below reloads with the jqery content it worked!</a>
</body>
</html>

这是页面 test3.php，其中包含刷新 iframe 外的 div 的 jQuery 代码。 .load() 有效，但 .get() 无效。我尝试使用 .get() 和 .getscript() 调用 jQuery，但这确实有效。我还尝试将它们包装在 .bind() .on() .live() 中，但是如果您知道以您认为可以使用的方式使用它们的方式，请随时发布。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$('#target', top.document).load("test4.php");
$('#target', top.document).get('testb.js');

</script>
</head>
<body>
Sent
</body>
</html>

这是test4.php，是刷新后加载到div中的新内容。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<p>....Polo</p>
<script type="text/javascript" src="testb.js"></script>

现在这是我尝试在 div 中实现的 jQuery，它是 test3.php 和 test4.php 页面上的 testb.js 中的内容。我本来打算写更复杂的代码，但由于根本没有 jQuery 工作，所以我决定简化它，直到找出 jQuery 不能工作的原因为止。

var myvariable = "Marco";
$("p").prepend(myvariable);

非常感谢您提供的任何帮助！

【问题讨论】：

标签： jquery ajax iframe html refresh

【解决方案1】：

我实际上建议您不要这样做。当然，您不应该有片段然后加载更多片段。这种方式会导致疯狂。

我能够让它发挥作用，但如果我让它重新写一遍，我会以不同的方式来做。它看起来很脆弱，而且肯定很难测试。我相信如果主文档中包含所有逻辑，并且片段不带任何内容，它会更好地工作。

我在使用 load() 时遇到了问题，但我不记得具体的细节了。可能是由于浏览器之间的差异？我们最终使用 get() 而不是 load()。

最大的症结在于 $('#target') 失败，因为新的 Javascript 没有及时附加到文档。因此，在 load() 调用期间触发时，它不会在主机文档中找到 ID。我能够使用 setTimeout() 解决这个问题

<body>
    <div id="stuff>
        <script type="text/javascript">
            setTimeout(function() {
                $('#target', top.document).get('testb.js');
            }, 1);
        </script>
        Sent
    </div>
</body>

棘手的地方可能实际上是我抓取 DIV 的方式：

$.get("/foo/bar", function(html) {
    var div = $('<div></div>');
    div.html(html);
    div.find('#stuff').detach().appendTo(target);
});

【讨论】：

我刚刚用谷歌浏览器尝试过，但它对我不起作用。感谢您尝试提供帮助！
啊，我忽略了一些细节，我已经添加了。虽然看起来我最终使用了 get()，但我不记得是因为它不起作用还是因为它更容易处理我需要做的其他操作。
感谢您尝试澄清，尽管我仍然没有任何运气。我完全按照发布的方式将脚本添加到正文中。我后来尝试用 get 切换负载。如果您可以发布从我的原始示例更改的任何额外代码，那么我可以简单地复制并粘贴确切的代码，如果您仍然有代码，那将非常有帮助。谢谢！
就像我说的，我正在做的是将我想要的内容放入 DIV，包括 JS。然后我从 get 请求中提取它并将其放入宿主文档中。
太棒了。如果您无法删除片段加载，您是否可以将设计展平以便只有主文档正在组装片段？这至少会给你一条最终消除它的途径。