转载 https://blog.csdn.net/qq_40012791/article/details/79862054
jQuery将DIV复制为另一个DIV 并且功能同在(delegate的用法)
置顶 2018-04-09 10:15:28 zxyBaby1027 阅读数 3162更多
分类专栏: jquery
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
-
<div id="copied"> //此div为原先存在的div
-
<div>
-
<div class="table-H" style="">
-
<input type="text" value=""><a href="javascript:void(0)" class="table-look remove_column">删除栏目</a>
-
</div>
-
<div class="line"></div>
-
</div>
-
</div>
-
<br>
-
<a href="javascript:void(0)" class="table-look add_column">新增栏目</a>
-
<section style="display: none" id="template"> //此模块为 要复制的模板
-
<div class="add_line">
-
<div class="table-H">
-
<input type="text" value=""><a href="javascript:void(0)" class="table-look remove_column">删除栏目</a>
-
</div>
-
<div class="line"></div>
-
</div>
-
</section>
让复制出来的div 删除功能同在 需要用绑定事件 但是试过on bind 都不可以 最后发现delegate可以
此处之所以不用克隆(clone) 是因为 在你复制出来一个后 再次点击的时候 会出现多个 所以最后使用了 append()
-
/**
-
* 删除栏目
-
*/
-
$('#copied').delegate(".remove_column", "click", function () {
-
$(this).parent().parent().remove();
-
});
-
/**
-
* 新增栏目
-
*/
-
$('.add_column').click(function () {
-
$('#copied').append($('#template').html());
-
});
此文为原创,转载忘加链接!!!!!!!!!!!!!!