更新:这是一个更短、更简单的代码片段来演示我的问题。尝试点击第一个按钮，其对应的事件监听器不起作用。只有第二个。
var a = {};
a.b = 0;
a.alert = () => {
a.b++;
document.getElementById('X').innerHTML += '<button id="_'+a.b+'">Button #'+a.b+'</button>';
document.getElementById('_'+a.b).addEventListener('click',(e)=>{
var p = document.getElementById('_'+a.b);
p.parentElement.removeChild(p);
});
}
a.alert();
a.alert();<!DOCTYPE html>
<html lang="en">
<body>
<span id="X"></span>
</body>
</html>更新:看来我真的输了。我检查了 DevTools，当我再次执行该函数时，之前创建的元素丢失了单击事件。
我想寻求一些帮助来尝试驯服事件监听器。似乎如果我尝试多次调用该函数，似乎只有最后一个函数起作用，这是一个问题，因为我希望能够显示多个警报。这就是我正在尝试做的事情。
我在这里缺少什么吗？或者这是使用对象包含函数的问题？
var alertify = {}
alertify.depth = [];
alertify.alert = (title, text, callback = () => {}) => {
var uniq = 'uniqalert_'+uniqid();
alertify.depth.push(uniq);
var content =
'<form onsubmit="return false" class="dialog" id="'+uniq+'">\
<div class="box">\
<div class="box_title">\
<div class="box_title_content">'+title+'</div>\
<img id="i'+uniq+'" src="'+operator.config.ximage+'">\
</div>\
<div class="box_content">'+text+'</div>\
<div class="box_button">\
<button class="yes" id="j'+uniq+'">OK</button>\
</div>\
</div>\
</form>';
selector('alertcontainer').innerHTML += content;
var f = selector(uniq);
selector('i'+uniq).addEventListener('click',()=>{
callback();
f.parentNode.removeChild(f);
});
selector('j'+uniq).addEventListener('click',()=>{
callback();
f.parentNode.removeChild(f);
});
}注意:我不隶属于alertify/js 团队。我只是使用了该 var 名称，因为我以前习惯使用它。
最佳答案
附加 HTML 字符串、给它一个 ID，然后获取该 ID 似乎是一种不好的方法。我发现这个片段可以将字符串转换为有效的 HTML DOM element更好。但不确定为什么旧代码不能按逻辑工作。如果有人能启发我为什么旧代码是错误的，那就太好了。
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes
return div.firstChild;
}
var a = {};
a.b = 0;
a.alert = () => {
a.b++;
var c = createElementFromHTML('<button id="_'+a.b+'">Button #'+a.b+'</button>');
document.getElementById('X').appendChild(c);
c.addEventListener('click',(e)=>{
c.parentElement.removeChild(c);
});
}
a.alert();
a.alert();
a.alert();<!DOCTYPE html>
<html lang="en">
<body>
<span id="X"></span>
</body>
</html>关于javascript - 函数调用时丢失事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62367546/