添加其他文件上传字段

Question

I am using this code to allow the user to create additional upload fields. The fields are being created and the user can select a file but it is never added to the input field. The only one that works is the first one. In firebug, I noticed there is no event listener for the additonal fields that are created.

<script>
$(document).ready(function () {
    var next = 1;
    $(".add-more").click(function (e) {
        e.preventDefault();
        var addto = "#field" + next;
        next = next + 1;
        var newIn = '<div id="field' + next + '" class="custom-file mt-3 mb-2"><label class="custom-file-label">NewFile ' + next + '</label><input class="custom-file-input" name="field' + next + '" type="file"><input type = "text" class="form-control mt-1 mb-1" name="field' + next + '" placeholder="Text" /></div>';
        var newInput = $(newIn);
        $(addto).after(newInput);
        $("#field" + next).attr('data-source', $(addto).attr('data-source'));
        $("#count").val(next);
    });

});

This is the HTML for the input that already exists and for the new put that is generated when a user clicks on the button to add new files:

<div id="fields">
<div id="field1" class="custom-file mt-1 mb-3">
<input class="custom-file-input" id="field-1" name="field-1" type="file">
<label class="custom-file-label">New File 1</label>
<input type="text" class="form-control mt-1 mb-1" placeholder="New File">
</div>

<div id="field2" class="custom-file mt-3 mb-2">
<label class="custom-file-label">New File 2</label>
<input class="custom-file-input" name="field2" type="file">
<input type="text" class="form-control mt-1 mb-1" name="field2" placeholder="Please provide a brief description of the uploaded file">
</div>

<button id="b1" class="btn btn-success add-more mt-4" type="button">Add more files</button>
</div>

Just a note; I am using Bootstrap 4.

Does anybody know the cause of this?

EDIT: I have just added this code and when I try to upload using the dynamically created inputs, the alert is 'undefined'

$("#fields").delegate("input[type=file]", "change", function () {
        alert($(this).attr("id"));
    });

I have created a fiddle using the code kindly provided by Bhushan and it appears to be working just fine. I think I may have a conflict within my application.

http://jsfiddle.net/kogcyc/x1hphsvb/

Thanks

Answer 1

you are attaching change event handler for only fields input and not to the new file input added.

please repalce

$("#fields").delegate("input[type=file]", "change", function () {
        alert($(this).attr("id"));
    });

with -- here we are attaching change event handler using .on and selector will look for all file input having id starts with fields

$(document).on("change","input[id^=field][type=file]",  function () {
        alert($(this).attr("id"));
    });