jQuery将DIV复制为另一个DIV 并且功能同在(delegate的用法) （复制多个div 然后单独删除）

转载   https://blog.youkuaiyun.com/qq_40012791/article/details/79862054

jQuery将DIV复制为另一个DIV 并且功能同在(delegate的用法)

置顶 2018-04-09 10:15:28 zxyBaby1027 阅读数 3162更多

分类专栏： jquery

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

 

1. <div id="copied"> //此div为原先存在的div

2. <div>

3. <div class="table-H" style="">

4. <input type="text" value=""><a href="javascript:void(0)" class="table-look remove_column">删除栏目</a>

5. </div>

6. <div class="line"></div>

7. </div>

8. </div>

9.  

10. <br>

11.  

12. <a href="javascript:void(0)" class="table-look add_column">新增栏目</a>

13.  

14. <section style="display: none" id="template"> //此模块为 要复制的模板

15. <div class="add_line">

16. <div class="table-H">

17. <input type="text" value=""><a href="javascript:void(0)" class="table-look remove_column">删除栏目</a>

18. </div>

19. <div class="line"></div>

20. </div>

21. </section>

让复制出来的div 删除功能同在   需要用绑定事件  但是试过on  bind 都不可以  最后发现delegate可以  

此处之所以不用克隆(clone) 是因为 在你复制出来一个后  再次点击的时候 会出现多个 所以最后使用了 append()

1. /**

2. * 删除栏目

3. */

4. $('#copied').delegate(".remove_column", "click", function () {

5. $(this).parent().parent().remove();

6. });

7.  

8. /**

9. * 新增栏目

10. */

11. $('.add_column').click(function () {

12. $('#copied').append($('#template').html());

13.  

14. });

此文为原创,转载忘加链接!!!!!!!!!!!!!!