0

我的代码有问题。父级中的添加按钮正在工作，它添加得很好。但在孩子中，添加按钮不起作用，删除按钮也是如此。我浏览器中的删除按钮仅在父级中有效，当我单击删除按钮时，它会删除我之前添加的所有字段并刷新站点。虽然我添加了 preventDefault。是否允许在文件中使用 preventDefault 多次？

这是我的代码： https ://jsfiddle.net/q3Lz997m/

代码js文件：

const clickBtn = document.querySelector('#addingPerson');
const field = document.querySelector('#inputPerson');
let i = 0;

const deleteField = document.querySelector('.deletePerson');

clickBtn.addEventListener('click', (event) => {
  event.preventDefault();
  const cloneField = field.cloneNode(true);
  cloneField.id = i++;
  field.parentNode.appendChild(cloneField);
});

deleteField.addEventListener('click', (e) => {
  e.preventDefault();
  field.parentNode.removeChild(field);
});

提前谢谢你！

4

1 回答 1

0

问题是cloneMethod不克隆事件监听器：

克隆一个节点会复制它的所有属性和它们的值，包括内在（在线）监听器。它不会复制使用 addEventListener() 添加的事件侦听器或分配给元素属性的事件侦听器。

你可以这样做：

https://jsfiddle.net/q3Lz997m/2/

const clickBtn = document.querySelector('#addingPerson');
const field = document.querySelector('#inputPerson');
let i = 0;

const deleteField = document.querySelector('.deletePerson');

function deleteDiv(e) {
  e.preventDefault();
  d = e.target.parentNode.parentNode.parentNode.parentNode;
  d.parentNode.removeChild(d);
}

function cloneDiv(event) {
  event.preventDefault();
  const cloneField = field.cloneNode(true);
  cloneField.id = i++;
  e = cloneField.querySelector('#addingPerson');
  e.addEventListener('click', cloneDiv);
  e = cloneField.querySelector('.deletePerson');
  e.addEventListener('click', deleteDiv);
  field.parentNode.appendChild(cloneField);  
}

clickBtn.addEventListener('click', cloneDiv);
deleteField.addEventListener('click', deleteDiv);

还有一个更短的版本https://jsfiddle.net/q3Lz997m/3/：

function addEventListeners(e) {
  e.querySelector('#addingPerson').addEventListener('click', cloneDiv);
  e.querySelector('.deletePerson').addEventListener('click', deleteDiv);
}

function deleteDiv(e) {
  e.preventDefault();
  d = e.target.parentNode.parentNode.parentNode.parentNode;
  d.parentNode.removeChild(d);
}

function cloneDiv(e) {
  e.preventDefault();
  p = e.target.parentNode.parentNode.parentNode.parentNode;
  cloneField = p.cloneNode(true); 
  addEventListeners(cloneField);
  p.parentNode.appendChild(cloneField);  
}

addEventListeners(document.querySelector('#inputPerson'));

另外，我认为您不需要 preventDefault() ，除非您的按钮位于表单内。

于 2016-12-02T11:02:53.910 回答