Jquery - 동적으로 필드 추가 및 제거 - 코드를 반복하지 않고 어떻게해야합니까?

Question

는 내가 "JQuery와 입력 필드를 추가/제거 '솔루션을 구현하고있다 : 내가 모든 일을하기 위해 몇 가지 JQuery와 플러그인을 사용해야합니다. 예를 들어이 코드가 작동 (추가 기능 없음)가 이미 마크 업을 위해, 그래서 날짜 선택기, SelectPicker 및 크기 조정 .. 를 사용

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

문제는 그 나는 추가 기능을 추가하려고 할 때 , 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(); 
     }); 

    }); 

}); 

당신이 최선의 방법이없는 것을 수행하는 방법에 대한 단서가 있습니까 어떤 코드를 repeting?

미리의 감사!

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

});