jQuery가 요소를 재귀 적으로 추가합니다.

Question

처음부터 jQuery Form Builder를 만들려고하고 있지만 몇 가지 문제가 있습니다.

양식 생성기에 새 필드를 추가하면 작동하지만 새 필드를 추가하려고하면 새 필드에 1을 더한 값이 추가됩니다. 다시 시도하면 3 요소 등을 추가합니다. 코드는 함수 안에 있으며 문서가 준비되면 호출됩니다.

나는 많은 시간을 보냈다 나는

function addField() { 
      var formAddField   = $("#form-add-field"); 
      var formConstructorForm  = $("#form-constructor-form"); 
      var addFieldButton   = $("#add-field-button"); 
      var fieldLabelName   = $("#field-label-name"); 
      var formGenerated   = $("#form-generated"); 
      var formGeneratedForm  = formGenerated.find("form"); 
      var fieldIdForm    = $("#field-id-form"); 
      var fieldTypeSelect   = $("#field-type-select"); 
      var inputTypeForm   = $("#input-type-form"); 
      var inputTypeSelect   = $("#input-type-select"); 
      var field     = ''; 
      var label     = ''; 
      var inputGroup    = ''; 

      formAddField.on("click", function(e) { 
       e.preventDefault(); 

       addFieldButton.addClass("disabled"); 
       formConstructorForm.addClass("show"); 

       fieldTypeSelect.on("change", function() { 
        var fieldTypeSelected = fieldTypeSelect.val(); 

        switch(fieldTypeSelected) { 
         case 'input': 
         inputTypeForm.show(); 
         addFieldButton.removeClass("disabled"); 
         field = '<input class="validate" id="' + fieldIdForm.val() + '" type="' + inputTypeSelect.val() + '">'; 
         break; 
         case 'select': 
         inputTypeForm.hide(); 
         addFieldButton.removeClass("disabled"); 
         field = '<select id="' + fieldIdForm.val() + '"></select>'; 
         break; 
         case 'textarea': 
         inputTypeForm.hide(); 
         addFieldButton.removeClass("disabled"); 
         field = '<textarea class="materialize-textarea" id="' + fieldIdForm.val() + '"></textarea>'; 
         break; 
        } 
       }); 

       addFieldButton.on("click", function(e) { 
        e.preventDefault(); 
        label  = '<label for="">' + fieldLabelName.val() + '</label>'; 
        inputGroup = '<div class="input-field col s12">' + '\n' + field + '\n' + label + '\n' + '</div>'; 
        formConstructorForm[0].reset(); 
        formConstructorForm.removeClass("show"); 
        $(inputGroup).appendTo(formGeneratedForm); 
       }); 
      }); 
     } 

여기에 기능 전체 jsfiddle을 그리고 그들이 호출 된 경우 (죄송합니다) 문제 어디의 명확한 비전을하지 않았습니다.

누구나 내게 이걸 줄 수 있겠 니? 감사!

Answer 1

코드의 문제점은 버튼을 누를 때마다 추가 클릭 이벤트가 추가된다는 것입니다. 아래의 업데이트 된 바이올린에서는 이전 리스너를 제거한 다음 새 리스너를 추가합니다.

완벽한 해결책은 아니지만 문제를 해결할 수 있습니다. 당신이 이벤트 때마다 바인딩

addFieldButton.off('click'); 
    addFieldButton.on("click", function(e) { 
    e.preventDefault(); 
    label = '<label for="">' + fieldLabelName.val() + '</label>'; 
    inputGroup = '<div class="input-field col s12">' + '\n' + field + '\n' + label + '\n' + '</div>'; 
    formConstructorForm[0].reset(); 
    formConstructorForm.removeClass("show"); 
    $(inputGroup).appendTo(formGeneratedForm); 
    }); 

https://jsfiddle.net/5d7poco0/

Answer 2

당신은 addfield 버튼은 다음

addFieldButton.unbind('click').on("click", function(e) { 

편집에

addFieldButton.on("click", function(e) { 

을 변경 누르

더 좋은 방법은 on 및 off를 사용하기보다는 개봉보다 큰 jQuery v1.7