jQuery可以处理手动创建的HTML，但不能处理jQuery创建的HTML？

我刚开始使用jQuery，实际上只需要一些非常基本的东西。以下是我想做的：

我将内容分为“.overview”div和“.detail”div。jQuery查看所有“.detail”-div，向上移动一个元素（.prev（.overview）），并附加一个按钮。然后它将所有“.detail”div缩小到零，并使用按钮分别显示/隐藏它们

我先是硬编码了按钮，但这似乎很乏味，也没有必要。但一旦我动态生成它们，显示/隐藏功能就不再起作用。我四处搜索，但我可能没有使用正确的术语

这是我的html：

<div class="title">
    <h2>Title</h2>
</div>
<div class="overview">
    <p>...</p>
</div>
<div class="detail">
        <p>...</p>
</div>

标题

这是jQuery代码（在单独的文件中）：

$（文档）.ready（函数（）{
$（“.detail”）。每个（函数（）{
$（本）.prev（“div”）。追加（“”）；
$.data（此为“realHeight”，$（此为.height（））；
}).css（{溢出：“隐藏”，高度：“0”}）；
$（“.expand”）.toggle（函数（）{
$（this.html（“”）
var div=$（this.next（“.detail”）
div.animate（{height:div.data（“realHeight”）+21}，250）；
}，函数（）{
$（this.html（“”）
$（this.next（“.detail”）.animate（{height:0}，250）；
});
});

如果你能给我指出正确的方向，我将不胜感激。或者，如果它很愚蠢，请告诉我需要搜索什么。：-）

---

谢谢

您需要了解的技术是事件委派——根据您使用的版本，查看jQuery中的和函数

但是，一般的原则是，不要将事件处理程序绑定到单个元素（在执行jQuery代码时必须存在这些元素），而是将单个事件处理程序绑定到一个您知道始终存在的元素（例如

标记），该元素运行依赖于选择器的函数

当您单击button元素时，会为该元素触发click事件，然后在DOM中弹出气泡，在上升过程中遇到的每个元素都会被触发。当它到达您的always present元素（您的

元素）时，它会根据提供的选择器检查事件的原始目标，并仅在匹配时执行代码。

$.next（）获取下一个同级项，.detail在DOM结构中不是.expand的同级项。您可能希望访问父级（“.overview”），然后获取下一个（）

或者改变结构，使他们成为兄弟姐妹

编辑： 在您的代码中，您可以这样做，这就是为什么他们不是兄弟姐妹：

$(".detail").each(function() {
    $(this)
        .prev("div") // <- this gets the overview div
        .append("<div class=\"expand\"><a href=#>more</a></div>"); // <- this creates the "expand" as a child of the overview div (so not a sibling of details)

$（“.detail”）。每个（函数（）{
$（本）
.prev（“div”）//非常感谢，我会调查的！为什么它们不是兄弟姐妹？.overview“、.expand”和.detail“div都是元素的子元素（或者是内容div，如果需要的话）。嗯……您是否更改了示例？我很确定，当我40分钟前查看它时，.expand”div在.overview中div…可能是我搞错了tho:/Oh。可能是，对不起，我在不断更新示例，尝试新东西。我的错。我将把我的游乐场移到一个新位置。：）如果我使用“after（）”而不是“append（）”，我的代码也会工作，只是为了完整。是的，那也行！：）如果答案有帮助的话，你可能会接受
$(".detail").each(function() {
    $(this)
        .prev("div") // <- this gets the overview div
        .append("<div class=\"expand\"><a href=#>more</a></div>"); // <- this creates the "expand" as a child of the overview div (so not a sibling of details)