我有以下情况:
一个带有 id #section
的 section
,在双击上我添加一个包含标签
的表单, 输入
一个保存按钮
和一个关闭表单按钮
。
对于点击上的关闭表单
按钮,我有另一个事件来删除表单,但该事件不起作用。你能告诉我这段代码有什么问题吗?
var setAttributes = function setAttributes(el, attrs) {
for (var key in attrs) {
el.setAttribute(key, attrs[key]);
}
};
function createForm() {
var form = document.createElement('form');
setAttributes(form, {
'class': 'hotspot-form'
});
var labelT = document.createElement('label');
setAttributes(labelT, {
'for': 'title'
});
labelT.innerHTML = 'Title';
var inputT = document.createElement('input');
setAttributes(inputT, {
'type': 'text',
'name': 'title',
'id': 'inputTitle'
});
var labelD = document.createElement('label');
setAttributes(labelD, {
'for': 'description'
});
labelD.innerHTML = 'Description';
var inputD = document.createElement('input');
setAttributes(inputD, {
'type': 'text',
'name': 'description',
'id': 'inputDescription'
});
var saveButton = document.createElement('button');
setAttributes(saveButton, {
'id': 'button-save',
'type': 'submit'
});
saveButton.innerHTML = 'Save';
var closeButton = document.createElement('button');
setAttributes(closeButton, {
'id': 'button-close',
'type': 'button'
});
closeButton.innerHTML = 'Close Form';
form.appendChild(labelT);
form.appendChild(inputT);
form.appendChild(labelD);
form.appendChild(inputD);
form.appendChild(saveButton);
form.appendChild(closeButton);
return form;
}
var section = document.querySelector('#section');
console.log(section);
section.addEventListener('dblclick', addForm, false);
function addForm() {
var form = createForm();
section.appendChild(form);
var inputT = form.querySelector('#inputTitle');
var inputD = form.querySelector('#inputDescription');
var saveButton = form.querySelector('#button-save');
var closeButton = form.querySelector('#button-close');
inputT.addEventListener('input', saveInput, false);
inputD.addEventListener('input', saveInput, false);
function saveInput() {
var newTitle = inputT.value;
var newDescription = inputD.value;
}
closeButton.addEventListener('click', function() {
section.removeEventListener('dblclick', addForm, false);
}, false);
}
#section {
width: 300px;
height: 300px;
border: 1px solid black;
}
.hotspot-form {
background-color: #3d3d3d;
padding: 5px;
}
.hotspot-form label {
display: inline-block;
color: #ffffff;
}
.hotspot-form input {
display: inline-block;
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
<section id="section"></section>
最佳答案
您的关闭按钮事件处理程序不会删除表单,它只是从该部分中删除双击事件处理程序。要删除表单,应该是:
closeButton.addEventListener("click", function() {
section.removeChild(form);
});
关于javascript - 删除 Javascript 中的事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38227866/