Jquery如何调用数组内部的filter函数

Question

Im在这段代码中使用了两个函数。用户可以通过点击“+”按钮上传图片。他们也可以通过点击“-”按钮移除图像。但文件上载功能对新行不起作用。用户不能选择任何文件，这些文件不显示在HTML中。请检查我的jsfiddle链接并帮助我。https://jsfidle.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

您需要使用现有的HTML而不是在jQuery中编写新的HTML。请研究一下jquery和JavaScript中的克隆。

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

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

这里我更新你的代码。

Answer 2

这可能是因为filer初始化只是在执行$('.docupload')选择器时将其函数绑定到选择器的结果。因此您随后添加的任何.docupload元素都没有绑定到它的filer函数。尝试在add事件中移动filter初始化，这样，无论何时添加新的文件上载项，该函数都将绑定到新创建的html元素。

演示