Javascript Jquery-动态添加和删除字段-如何在不重复代码的情况下执行此操作？

我正在实施“JQuery添加/删除输入字段”解决方案： 我需要使用一些JQuery插件来使一切正常。例如，我使用Datepicker、SelectPicker和Autosize。。 因此，对于已经存在的标记（没有添加功能），此代码可以工作：

$(document).ready(function() {
    $('.autosize').autosize();      
    $('input, textarea').placeholder();
    $('.datetimepickaa').datetimepicker({
        pickTime: false
    });
    $('.selectpicker').selectpicker();

    // Remove the specific row
    $("button.removee").click(function(){
        $(this).closest(".conteiner").remove();
    });
});

问题是，当我尝试添加add功能时，jquery插件对新元素不起作用，因此我必须在add代码中重复调用以使其工作：

$(document).ready(function() {

    $('.autosize').autosize();      
    $('input, textarea').placeholder();
    $('.datetimepickaa').datetimepicker({
        pickTime: false
    });
    $('.selectpicker').selectpicker();

    // Remove the specific row
    $("button.removee").click(function(){
        $(this).closest(".conteiner").remove();
    });

    // ADD FUNCTIONALITY
    $("#add").click(function() {

        var row = '\
               <div class="form-group conteiner">\
                   <div class="row">\
                       <div class="col-md-2">\
                           <label for="date">Date:</label>\
                           <div class="input-group date datetimepickaa"  id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
                               <input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
                               <span class="input-group-addon">\
                                   <span class="glyphicon glyphicon-calendar"></span>\
                               </span>\
                           </div>\
                       </div>\
                       <div class="col-md-9">\
                           <label for="notes">Notes:</label>\
                           <textarea class="form-control autosize" id="" name=""></textarea>\
                       </div>\
                       <div style="" class="col-md-1">\
                           <button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
                               <span class="glyphicon glyphicon-remove"></span> Delete\
                           </button>\
                       </div>\
                   </div>\
               </div>';

        $("#wrapper").append(row);

        // REPETITION OF THE CODE ABOVE!!!!!!   //////////////////////////////
        $('.autosize').autosize();      
        $('input, textarea').placeholder();
        $('.datetimepickaa').datetimepicker({
            pickTime: false
        });
        $('.selectpicker').selectpicker();

        // Remove the specific row
        $("button.removee").click(function(){
            $(this).closest(".conteiner").remove();
        }); 

    });

});

$（文档）.ready（函数（）{
$（'.autosize'）.autosize（）；
$（'input，textarea'）。占位符（）；
$（'.datetimepickaa'）.datetimepicker({
拾取时间：错误
});
$（'.selectpicker'）.selectpicker（）；
//删除特定行
$（“button.removee”）。单击（函数（）{
$（this）.closed（“.conteiner”）.remove（）；
});
//添加功能
$（“#添加”）。单击（函数（）{
var row=\
\
\
\
日期：\
\
\
\
\
\
\
\
\
注:\
\
\
\
\
删除\
\
\
\
';
$（“#包装”）.append（行）；
//重复上面的代码//////////////////////////////
$（'.autosize'）.autosize（）；
$（'input，textarea'）。占位符（）；
$（'.datetimepickaa'）.datetimepicker({
拾取时间：错误
});
$（'.selectpicker'）.selectpicker（）；
//删除特定行
$（“button.removee”）。单击（函数（）{
$（this）.closed（“.conteiner”）.remove（）；
}); 
});
});

你有没有关于如何在不重复任何代码的情况下以最好的方式做到这一点的线索

---

谢谢，这是事先准备好的

将它们提取到函数中并调用该函数

function initializeThings()
{
$('.autosize').autosize();      
    $('input, textarea').placeholder();
    $('.datetimepickaa').datetimepicker({
        pickTime: false
    });
    $('.selectpicker').selectpicker();
 // Remove the specific row
    $("button.removee").click(function(){
        $(this).closest(".conteiner").remove();
    });
}

$(document).ready(function() {

initializeThings();



// ADD FUNCTIONALITY
$("#add").click(function() {

    var row = '\
           <div class="form-group conteiner">\
               <div class="row">\
                   <div class="col-md-2">\
                       <label for="date">Date:</label>\
                       <div class="input-group date datetimepickaa"  id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
                           <input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
                           <span class="input-group-addon">\
                               <span class="glyphicon glyphicon-calendar"></span>\
                           </span>\
                       </div>\
                   </div>\
                   <div class="col-md-9">\
                       <label for="notes">Notes:</label>\
                       <textarea class="form-control autosize" id="" name=""></textarea>\
                   </div>\
                   <div style="" class="col-md-1">\
                       <button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
                           <span class="glyphicon glyphicon-remove"></span> Delete\
                       </button>\
                   </div>\
               </div>\
           </div>';

    $("#wrapper").append(row);

    initializeThings();

});

函数初始化（）
{
$（'.autosize'）.autosize（）；
$（'input，textarea'）。占位符（）；
$（'.datetimepickaa'）.datetimepicker({
拾取时间：错误
});
$（'.selectpicker'）.selectpicker（）；
//删除特定行
$（“button.removee”）。单击（函数（）{
$（this）.closed（“.conteiner”）.remove（）；
});
}
$（文档）.ready（函数（）{
初始化字符串（）；
//添加功能
$（“#添加”）。单击（函数（）{
var row=\
\
\
\
日期：\
\
\
\
\
\
\
\
\
注:\
\
\
\
\
删除\
\
\
\
';
$（“#包装”）.append（行）；
初始化字符串（）；
});

可能尝试改用克隆？将代码逻辑包装到函数中，然后在需要时调用它。注意不要为同一元素绑定多个单击处理程序。对于事件处理程序，似乎应该改用委派