javascript - 展开/折叠并非所有都在创建的 div 中工作

Question

我有这段代码可以在每个创建的 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++;
    });

内容.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，第 1、2 和 3 个创建的 div 的展开/折叠效果不佳。

如何解决这个问题以及如何将创建的 div 的 'id' 插入到每个的标题中（例如，第二个 div 的标题 = header addedDiv2）？

在此先感谢您的任何建议。

Answer 1

您需要在div通过 JavaScript 加载后立即执行此函数。

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

如果这不可能，请使用该$.on()功能。

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

Answer 2

您content_head在实际加载之前绑定了点击处理程序。要更正此问题，您需要在加载事件后通过绑定成功回调中的事件来绑定事件load()：

...
.appendTo('#container').load("content.php", function() {
    $(this).find(".content_head").click(function() { 
        $(this).next(".content_body").slideToggle(600);
    });
});
...