jquery如何调用数组中的过滤函数

Question

在这段代码中使用了两个函数。用户可以点击“+”按钮上传图片。他们也可以通过点击“ - ”按钮来删除图像。但文件上传功能不适用于新行。用户不能选择任何文件，这些文件不会显示在HTML中。 请检查我的jsfiddle链接并帮助我。 https://jsfiddle.net/mhmdsohail/6mee3L8t/14/

var max_fields3 = 10; //maximum input boxes allowed 
var wrapper3 = $("#portfoliodocs"); //Fields wrapper 
var add_button3 = $(".addmore_doc"); //Add button ID 

var x = 1; //initlal text box count 
$(add_button3).click(function (e) { //on add input button click 
    e.preventDefault(); 
    if (x < max_fields3) { //max input box allowed 
     x++; //text box increment 
     $(wrapper3).append('<div class="form-group label-floating is-empty onerow portwidth2"><div class="socialmediaside2"><input type="text" class="form-control" name="portfoliodoctitle[]" maxlength="10" value="" placeholder="Document Title"><div class="jFiler jFiler-theme-default"><input type="file" class="docupload" name="portfoliodoc[]" accept="application/pdf, application/doc, application/docx" style="position: absolute; left: -9999px; top: -9999px; z-index: -9999;"><div class="jFiler-input"><div class="jFiler-input-caption"><span>Choose files To Upload</span></div><div class="jFiler-input-button">Choose Files</div></div></div></div><button type="button" class="btn btn-default btn-sm bckbtn remove_field3"><i class="fa fa-trash-o" aria-hidden="true">-</i></button></div>'); //add input box 
    } 
}); 
$(wrapper3).on("click", ".remove_field3", function (e) { //user click on remove text 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--; 
}); 
------------------------------------------- 
$('.docupload').filer({ //I have to change in here 
    limit: 12 
    , maxSize: 2 
    , fileMaxSize: 1 
    , extensions: ["jpg", "png", "gif"] 
    , showThumbs: true 
    , addMore: true 
    , allowDuplicates: false 
    , canvasImage: true 
    , templates: { 
     box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>' 
     , item: '<li class="jFiler-item">\ 
        <div class="jFiler-item-container">\ 
         <div class="jFiler-item-inner">\ 
          <div class="jFiler-item-thumb">\ 
           <div class="jFiler-item-status"></div>\ 
           <div class="jFiler-item-thumb-overlay">\ 
            <div class="jFiler-item-info">\ 
             <div style="display:table-cell;vertical-align: middle;">\ 
              <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\ 
              <span class="jFiler-item-others">{{fi-size2}}</span>\ 
             </div>\ 
            </div>\ 
           </div>\ 
           {{fi-image}}\ 
          </div>\ 
          <div class="jFiler-item-assets jFiler-row">\ 
           <ul class="list-inline pull-left">\ 
            <li>{{fi-progressBar}}</li>\ 
           </ul>\ 
           <ul class="list-inline pull-right">\ 
            <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ 
           </ul>\ 
          </div>\ 
         </div>\ 
        </div>\ 
       </li>' 
     , itemAppend: '<li class="jFiler-item">\ 
         <div class="jFiler-item-container">\ 
          <div class="jFiler-item-inner">\ 
           <div class="jFiler-item-thumb">\ 
            <div class="jFiler-item-status"></div>\ 
            <div class="jFiler-item-thumb-overlay">\ 
             <div class="jFiler-item-info">\ 
              <div style="display:table-cell;vertical-align: middle;">\ 
               <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\ 
               <span class="jFiler-item-others">{{fi-size2}}</span>\ 
              </div>\ 
             </div>\ 
            </div>\ 
            {{fi-image}}\ 
           </div>\ 
           <div class="jFiler-item-assets jFiler-row">\ 
            <ul class="list-inline pull-left">\ 
             <li><span class="jFiler-item-others">{{fi-icon}}</span></li>\ 
            </ul>\ 
            <ul class="list-inline pull-right">\ 
             <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ 
            </ul>\ 
           </div>\ 
          </div>\ 
         </div>\ 
        </li>' 
     , progressBar: '<div class="bar"></div>' 
     , itemAppendToEnd: false 
     , canvasImage: true 
     , removeConfirmation: true 
     , _selectors: { 
      list: '.jFiler-items-list' 
      , item: '.jFiler-item' 
      , progressBar: '.bar' 
      , remove: '.jFiler-item-trash-action' 
     } 
    } 
    , dialogs: { 
     alert: function (text) { 
      return alert(text); 
     } 
     , confirm: function (text, callback) { 
      confirm(text) ? callback() : null; 
     } 
    } 
    , captions: { 
     button: "Choose Files" 
     , feedback: "Choose files To Upload" 
     , feedback2: "files were chosen" 
     , drop: "Drop file here to Upload" 
     , removeConfirmation: "Are you sure you want to remove this file?" 
     , errors: { 
      filesLimit: "Only {{fi-limit}} files are allowed to be uploaded." 
      , filesType: "Only Images are allowed to be dddduploaded." 
      , filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB." 
      , filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB." 
     } 
    } 
}); 

Answer 1

这可能是因为在filer intialization只是结合其功能在被执行了它的那一刻$('.docupload')选择的结果。因此，之后添加的任何.docupload元素都没有绑定到它的filer函数。尝试在add事件中移动filter初始化，因此无论何时添加新的文件上传项，该函数都会绑定到新创建的html元素。

Demo

Answer 2

您需要使用现有的HTML，而不是在jQuery的写新的HTML。 请在jquery和javascript中查看克隆。

$(wrapper3).append($('#portfoliodocs .form-group').first().clone(true)); //add input box 

只克隆现有节点并追加到父节点中。

Here我更新你的代码。