Function 召回事件监听器丢失

Question

UPDATE: Here's a shorter and a simpler snippet to demonstrate my problem.更新：这是一个更短更简单的片段来演示我的问题。 Try to click on the first button and its corresponding event listener does not work.尝试单击第一个按钮，其相应的事件侦听器不起作用。 Only the second one.只有第二个。

 var a = {}; ab = 0; a.alert = () => { a.b++; document.getElementById('X').innerHTML += '<button id="_'+a.b+'">Button #'+a.b+'</button>'; document.getElementById('_'+ab).addEventListener('click',(e)=>{ var p = document.getElementById('_'+ab); p.parentElement.removeChild(p); }); } a.alert(); a.alert();

 <!DOCTYPE html> <html lang="en"> <body> <span id="X"></span> </body> </html>

UPDATE: It seems that I really lose the event.更新：看来我真的输了。 I checked DevTools and the created elements prior to that lose the click event when I execute the function again.当我再次执行 function 时，我检查了 DevTools 并且在此之前创建的元素丢失了单击事件。

I would like to ask for some help with trying to tame event listeners.我想在尝试驯服事件侦听器方面寻求一些帮助。 It seems that if I try to call the function multiple times, only the last function seems to work, which is a problem since I would like to have the ability to show multiple alerts.似乎如果我尝试多次调用 function ，只有最后一个 function 似乎有效，这是一个问题，因为我希望能够显示多个警报。 Here's what I'm trying to do.这就是我想要做的。

Is there something that I'm missing here?有什么我在这里想念的吗？ Or is this a problem with using objects to contain functions?或者这是使用对象包含函数的问题？

 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); }); }

Note: I am not affiliated to the alertify/js team.注意：我不隶属于 alertify/js 团队。 I just used that var name as I'm accustomed to using it before.我只是使用了那个 var 名称，因为我以前习惯使用它。

Answer 1

It seems that appending the HTML string, giving it an ID, and fetching that ID is a bad way of doing it.似乎附加 HTML 字符串，给它一个 ID，然后获取该 ID 是一种不好的方法。 I have found this snippet that converts the string to a valid HTML DOM element is better.我发现这个将字符串转换为有效的HTML DOM 元素的片段更好。 Not sure though why the old code does not work as logically it should.不确定为什么旧代码在逻辑上不能正常工作。 It would be good if someone can enlighten me on why the old code is wrong.如果有人能告诉我为什么旧代码是错误的，那就太好了。

 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 = {}; ab = 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>

Function 召回事件监听器丢失

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-14 03:18:35

Function 召回事件监听器丢失

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-14 03:18:35

解决方案1
2 已采纳 2020-06-14 03:18:35