Question

我有这个代码在每个创建的div中创建div和collapse / expand元素。

     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++;
    });

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

如何解决这个问题，以及如何将创建的div的'id'插入到每个的标题中（例如，第二个div的头部=头部添加了Div2）？

提前感谢任何建议。

Answer 1

您需要在通过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);
});

Answer 2

您在content_head实际加载之前绑定了load()的点击处理程序。要解决此问题，您需要通过绑定... .appendTo('#container').load("content.php", function() { $(this).find(".content_head").click(function() { $(this).next(".content_body").slideToggle(600); }); }); ...成功回调中的事件来绑定事件后加载事件：

{{1}}

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

2 个答案: