添加/删除字段 - 文件上传 JavaScript

Question

伙计们， 我正在尝试制作带有添加按钮的文件上传表单，并删除更多用于文件上传的字段。 发生的情况是，当我触发按钮时，添加和删除，他们找不到克隆的div，因此添加/删除功能在克隆的字段中不起作用。

我把代码放在这里作为示例

const $btnAdd = document.querySelectorAll('[data-js="btn-add"]');
const listBtnAdd = Array.from($btnAdd);
const $btnRemove = document.querySelectorAll('[data-js="btn-remove"]');
const listBtnRemove = Array.from($btnRemove);
const $rowAttach = document.querySelectorAll('[data-js="rowAttach"]');
const listRow = Array.from($rowAttach);
let rows = listRow.map((row, i, arr) => {
return row;
});
listBtnAdd.map((btnAdd, i) => {
btnAdd.addEventListener('click', function(e){
e.preventDefault();
console.log("button", btnAdd, i);
const formItems = document.querySelector('[data-js="formAttach"]');
const copy = formItems.firstElementChild.cloneNode(true);
formItems.appendChild(copy);
}, false);
});
listBtnRemove.map( (btnRemove, i)=> {
btnRemove.addEventListener('click', function(e){
e.preventDefault(e);
console.log('remove btn', btnRemove, i);
}, false);
});
<!-- begin snippet: js hide: false console: true babel: false -->

.row-attach { display: inline-block;margin-bottom: 20px }
.row-attach fieldset {float: left; margin-right: 10px;border: 0;}
.row-attach label {display: block;font-weight: bold;margin-bottom: 5px; }

<h3>Form</h3>
<form enctype="multipart/form-data" action="/upload/image" method="post" data-js="formAttach">
<div class="row-attach" data-js="rowAttach">
<fieldset>
<Label>Arquivo Anexado</Label>
<input type="file" id="file-name" name="file-upload" value="escolha" multiple>
</fieldset>
<fieldset>
<Label>Descrição</Label>
<input type="text" name="descricao" value="">
<button data-js="btn-add">+</button>
<button data-js="btn-remove">X</button>
</fieldset>
</div>      
</form>
<div class="btn-carregar">
<input type="submit" value="Carregar">
</div>

如何触发创建的新字段？

Answer 1

如果我正确理解您的问题，您遇到的问题是cloneNode不会克隆事件侦听器。

您要做的第一件事是将侦听器从map函数中添加的函数，以便您可以独立调用它们并将事件添加到克隆的项目中，例如

let triggerAdd = function(btnAdd, i){
btnAdd.addEventListener('click', function(e){
e.preventDefault();
console.log("button", btnAdd, i);
let formItems = document.querySelector('[data-js="formAttach"]'),
copy = formItems.firstElementChild.cloneNode(true),
copiedAdd = copy.querySelector('[data-js="btn-add"]'),
copiedRemove = copy.querySelector('[data-js="btn-remove"]');
triggerAdd(copiedAdd, i+1);
triggerRemove(copiedRemove, i+1)
formItems.appendChild(copy);
}, false);
}
let triggerRemove = function(btnRemove, i){
btnRemove.addEventListener('click', function(e){
e.preventDefault(e);
console.log('remove btn', btnRemove, i);
}, false);
}
listBtnAdd.map((btnAdd, i) => {
triggerAdd(btnAdd, i);
});
listBtnRemove.map( (btnRemove, i)=> {
triggerRemove(btnRemove, i);
});

Answer 2

我设法像这样解决它：

form.addEventListener('click', function (evt) {
const elem = evt.target;
const dataJS = elem.dataset.js; 
if (dataJS != null) {
evt.preventDefault();
}
if ('btn-add' === dataJS) {
const row = createRow();
row.querySelector('[name="file-upload"]').value = '';
row.querySelector('[name="descricao"]').value = '';
} else if ('btn-remove' === dataJS) {
evt.target.parentNode.parentNode.remove();
}
});
function createRow() {
const row = rows[0].cloneNode(true);
rows[0].parentNode.appendChild(row);
return row;
}