使用 jQuery 重新加载具有动态内容的 div答案

【问题标题】：Reload a div with dynamic content using jQuery使用 jQuery 重新加载具有动态内容的 div
【发布时间】：2015-12-20 04:03:19
【问题描述】：

任务是重新加载 list div 及其所有内容。

内容为space和foo，也是用javascript生成的。

<div id="list-wrapper">
    <div id="list">
        <div class="space"></div>
        <div class="foo"></div>
        <div class="foo"></div>
        <div class="foo"></div>
        <div class="space"></div>
    </div>
</div>

我正在尝试使用

$("#list-wrapper").load(document.URL + " #list");

但这不能正常工作 - 重新加载的 list 是空的：

<div id="list-wrapper">
    <div id="list">
    </div>
</div>

我也试过了

$("#list").load(document.URL + " #list");

同样，新的list 是空的。

有什么办法呢？

编辑以明确任务。想象一下，我们通过打开 Chrome 开发工具并删除了 3 个 foo 中的 1 个，手动对网页进行了一些更改。之后，我们希望脚本重新加载 list div，以显示所有 3 个foo，而不是 2 个。

【问题讨论】：

你能补充更多细节吗？第一次加载的情况如何？
看起来您正在尝试加载当前的#list，根据您的说法，它是空的。
@JesusAngulo 第一次不是我加载的。它是 Chrome 的某种插件。第一次是 Chrome 自己生成的，不是我自己生成的。
您的问题不够清楚，无法得出正确的答案。您想显示动态创建的内容，还是尝试加载您在其他地方拥有的一些数据。
@Franco。我已更新帖子，请参阅底部的“编辑”。

标签： javascript jquery

【解决方案1】：

只需先清空 div 的 html，然后每次都加载新的 html。

$("#list").html( ).load(document.

   URL+ "#list");

您的代码中的 id 选择器存在间隙（即#list）

【讨论】：

【解决方案2】：

$.load 将向同一 URL 发出 HTTP 请求，并在不应用任何 javascript 的情况下获取标记。既然你说#list 被 javascript 填充，那么它将是空的。

来自 jQuery docs:

当使用没有后缀选择器表达式的 URL 调用 .load() 时，内容会在脚本被删除之前传递给 .html()。这会在脚本块被丢弃之前执行它们。但是，如果调用 .load() 时将 选择器表达式附加到 URL，则脚本会在 DOM 更新之前被剥离，因此不会被执行。

有一种简单的方法可以克隆加载的元素.clone。

$('#list').clone().prop('id', '#list-wrapper').appendTo('body');

【讨论】：

好的，这就解决了实际问题。谢谢你，赞成。但是有什么办法让它重新加载呢？
我刚加了，有一个小错误。
嗯。这将创建第二个list，即第一个的完全（未重新加载）副本。首先，为什么我有 2 个lists 而不是一个？其次，第二个没有重新加载。我更新了帖子以明确任务。无论如何，您发布的代码很有帮助。
那么现在的问题不同了。您想通过执行 AJAX 请求再次调用 javascript。我什至不知道 Chrome 扩展程序是否会将 javascript 注入请求中，因此它甚至可能无法以这种方式工作。