Question

我正在使用此代码来允许用户创建其他上传字段。正在创建字段，并且用户可以选择文件，但是永远不会将其添加到输入字段中。唯一可行的是第一个。在Firebug中，我注意到所创建的附加字段没有事件监听器。

<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);
    });

});

这是用于输入的HTML和当用户单击按钮以添加新文件时生成的新put的HTML：

<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>

只是一个音符；我正在使用Bootstrap 4。

有人知道原因吗？

编辑：我刚刚添加了这段代码，当我尝试使用动态创建的输入进行上传时，警报为“未定义”

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

我使用Bhushan提供的代码创建了一个小提琴，它似乎运行得很好。我认为我的应用程序中可能有冲突。

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

谢谢

Answer 1

您仅将更改事件处理程序附加到字段输入，而不附加到添加的新文件输入。

请更换

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

with-在这里，我们使用.on附加更改事件处理程序，选择器将查找所有ID以字段开头的文件输入

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

添加其他文件上传字段

1 个答案: