Question

民间，我尝试使用添加按钮创建文件上传表单，并删除更多字段以进行文件上传。发生的事情是当我触发按钮时，无论是添加还是删除，它们都找不到克隆的div，因此添加/删除功能在克隆字段中不起作用。

我把这里的代码作为例子

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何触发创建的新字段？

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

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

2 个答案: