配列内のフィルタ関数を呼び出す方法をjquery

Question

私はこのコードで2つの関数を使用しています。ユーザーは "+"ボタンをクリックして画像をアップロードできます。また、 " - "ボタンをクリックして画像を削除することもできます。しかし、ファイルのアップロード機能は新しい行では機能していません。ユーザーは、任意のファイルを選択することはできませんが、それらは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使う初期はそれが実行されている現時点では$('.docupload')セレクタの結果にその機能をバインドするので、これはおそらく発生します。したがって、後で追加する要素.docuploadには、filerの関数がバインドされていません。 addイベント内でfilterの初期化を移動してみてください。新しいファイルアップロードアイテムを追加するたびに、関数は新しく作成されたhtml要素にバインドされます。

Demo

Answer 2

代わりにjqueryの内の書き込み新しいHTMLの既存のHTMLを使用する必要があります。 jqueryおよびjavascriptでクローンを調べてください。

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

既存のノードをクローンして親ノードに追加するだけです。

Hereコードを更新します。