如何在附加函数创建后最小化单个框

Question

我有一些聊天 boxes.after 框 creation.how 最小化单个框

$(document).ready(function(){
    $("a").click(function(){ 
    var name = $(this).html();
    var user ='<div id="mainchat"><button id="min"> min</button><br>'+name+'</div>';
   $("#demo1").append(user);
   return false;
    });
});
// minimize the individual box
$(document).on('click', '#min',  function(){
  $(this).find("#mainchat").toggle(700);// its not working.
    //$("#mainchat").toggle(700) applied this code,first box only was minimized.

});

#mainchat
{
  position :relative;
    float:left;
  top:10px;
  left:50px;
  margin right:10px;
  height:250px;
  width:100px;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#">first</a><br>
<a href="#">second</a><br>
<a href="#">third</a>

<p id ="demo1"></p>

请帮忙最小化个人boxes.When提前点击个人最小化buttons.thanks

Answer 1

只需编辑它，因为 find 仅适用于指向子元素：

看这里：https://jsfiddle.net/r84dw7t3/

// minimize the individual box
$(document).on('click', '#min',  function(){
  $(this).parent("#mainchat").toggle(700);
});

如何在附加函数创建后最小化单个框

how to individual box minimize after append function creation

javascript

jquery

append

slidetoggle