Javascript expand/collpase不是所有在创建的div中工作

我有以下代码来创建div，并在每个创建的div中折叠/展开元素

     var i=1;
      $('#addDiv').click(function() {
        var divId="addedDiv"+i; 
        $(".content_body").slideUp(500);      
        $('<div></div>').attr({
            'id' : divId,
            'class' : 'addedDiv'           
      })
      .appendTo('#container').load("content.php");
      $(".content_head").click(function()
      { 
        $(this).next(".content_body").slideToggle(600);
      });
      i++;
    });

var i=1；
$（'#addDiv'）。单击（函数（）{
var divId=“adddiv”+i；
$（“.content_body”）.slideUp（500）；
$（''）.attr({
'id'：divId，
'class'：'addediv'
})
.appendTo（“#container”）.load（“content.php”）；
$（“.content\u head”）。单击（函数（）
{ 
$（this）.next（“.content_body”）.slideToggle（600）；
});
i++；
});

content.php：

<h2 class="content_head" style="background:orange;"> header</h2>      
<div class="content_body" style="background:blue;"> content </div>

标题
内容

html:

 <input id="addDiv" type="button" value="add div" >
 <div id="container" style="width:500px;height:auto;background:red;"></div>

假设创建了5个div，则第一个、第二个和第三个创建的div的扩展/折叠工作不正常

如何解决此问题，以及如何将已创建div的“id”插入每个 （例如，第二部分的标题=添加的标题v2）

---

提前感谢您的建议。

您需要在通过JavaScript加载

div

后立即执行此函数

$(".content_head").click(function() {
    $(this).next(".content_body").slideToggle(600);
});

如果不可能，请使用

$.on（）

函数

$("body").on("click", ".content_head", function(){
    $(this).next(".content_body").slideToggle(600);
});

---

您正在为

content\u head

绑定单击处理程序，然后才实际加载它。要更正此问题，您需要在加载事件后通过在

load（）

的成功回调中绑定事件来绑定事件：

---

仅供参考

应该是

，

$（''）

可以是

$（''）

@roXon谢谢您的输入：）-0.5。。。。。。。。。。。。但为什么会这样呢？有没有更好的方法来达到同样的效果？@roXon-另一种方法是在

文档
对象上使用
.on（）
或更高的容器。但是我认为把它附加到元素本身就不那么重了。如果你问我，在一个未关闭的单独的
.on
函数中使用click处理程序将使代码更加可读和可用。这就是为什么我们有
.on（）
方法的原因。“更高的容器”应该是：
静态父容器
更具描述性是的，使用
.on（）
，它会更干净，但如果不这样做，它可能会更快（是的，如果您将它附加到直接父容器，不会有太大区别）。第二，上面的imo（比使用
.on（）
）更清楚地说明了错误的原因。我的部分意图是要说明这一点。比什么测试更快
.on（）
将单击处理程序委托给将来要创建的任何元素（读取：
以添加到文档对象模型
）。在阅读
.load（）
回调函数时，您在逻辑上希望看到在
成功
响应后立即执行函数，而不是建议在ajax加载回调函数中创建单击处理程序？说使用
document
或
#parent
没有区别，我想你不知道
传播
，这只是我的观点
...
.appendTo('#container').load("content.php", function() {
    $(this).find(".content_head").click(function() { 
        $(this).next(".content_body").slideToggle(600);
    });
});
...