child中的deletebutton和child中的addbutton不起作用

时间:2016-12-02 09:53:20

标签: javascript clone addeventlistener clonenode

我的代码有问题。父进程中的添加按钮正在工作,它添加正常。但在孩子中,添加按钮不起作用,删除按钮也是如此。我浏览器中的删除按钮仅在父级中工作,当我单击删除按钮时,它会删除之前添加的所有字段并刷新站点。虽然我添加了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);
});

先谢谢你了!

1 个答案:

答案 0 :(得分: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()。