jQuery将DIV複制為另一個DIV 并且功能同在(delegate的用法)

<div id="copied"> //此div為原先存在的div
    <div>
        <div class="table-H" style="">
            <input type="text" value=""><a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="table-look remove_column">删除欄目</a>
        </div>
        <div class="line"></div>
    </div>
</div>

<br>

<a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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());

});