javascript - Jquery - 动态添加和删除字段 - 如何在不重复代码的情况下做到这一点？

Question

我正在实现“JQuery 添加/删除输入字段”解决方案:我需要使用一些 JQuery 插件来使一切正常工作。例如，我使用 Datepicker、SelectPicker 和 Autosize..因此，对于已经存在的标记(没有 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 功能时，jquery 插件不适用于新元素，因此我必须在添加代码中重复调用才能使其工作:

$(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();
        }); 

    });

});

您知道如何在不重复任何代码的情况下以最佳方式做到这一点吗？

提前致谢!!

Answer 1

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

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();

});