在函数调用时丢失事件监听器

Question

更新：这里有一个更短更简单的片段来演示我的问题。尝试点击第一个按钮，它对应的事件监听器不起作用。只有第二个。

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 名称，因为我以前习惯使用它。

Answer 1

似乎附加 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>

在函数调用时丢失事件监听器

Losing Event Listeners on Function Recall

javascript

dom-events