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