Losing Event Listeners on Function Recall

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

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.

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. 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. I just used that var name as I'm accustomed to using it before.

what is the content of the `uniqid()` method? and is `selector` meant to be `document.querySelector`? — j3ff, Jun 14 '20 at 02:40
``uniqid()`` returns a number that just increments up every time I call it, and yes. That's just a query selector, specifically ``getElementById``. I made it into a short function to avoid typing it longer. — thisjt, Jun 14 '20 at 02:49

score 2 · Accepted Answer · answered Jun 14 '20 at 03:18

It seems that appending the HTML string, giving it an ID, and fetching that ID is a bad way of doing it. I have found this snippet that converts the string to a valid HTML DOM element is better. 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 = {};
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

1 Answers1