Jquery如何调用数组内的过滤函数

Question

Im using two function in this code. user can upload images by click "+" button. Also they can remove the image by click "-" button. But file upload function is not working for new rows. User cant select any files and those are not display in the html. Please check my jsfiddle link and help me. 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

This probably happens because the filer intialization just binds its functions to the result of the $('.docupload') selector at the moment it is been executed. So any .docupload elements you add afterwards have no filer functions bound to it. Try moving the filter initialization inside the add event, so anytime you add a new file upload item the function is bound to the newly create html elements.

Demo

Answer 2

You need to use existing HTML instead of write new html in jquery. please look into clone in jquery and javascript .

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

Just clone existing node and append in parent node.

Here I update you code.