Mi objetivo es el siguiente: hay un div con un lapso editable dentro, cuando se escribe un punto dentro del lapso, quiero agregar un nuevo lapso adyacente, enfocar el nuevo lapso y continuar escribiendo en ese, que debe tener el mismo comportamiento.
El comportamiento que describo realmente funciona, pero cada vez que se agrega un nuevo lapso, el anterior pierde todos los detectores de eventos que había agregado.
El cuerpo de mi archivo html se ve así
<body> <div id="search"> <span class="tag">person</span>. </div> <script src="myscript.js"></script> </body> donde myscript.js crea un primer tramo (span1) dentro #search y luego agrega los siguientes detectores de eventos
function createTag(event) { if (event.key == '.') { let color = search.childElementCount; let span = document.createElement('span'); span.setAttribute('style', 'color:' + palette[color]); span.className = 'tag'; span.contentEditable = true; search.innerHTML = search.innerHTML + '.'; search.appendChild(span) span.addEventListener('keyup', createTag); span.addEventListener('blur', deleteTag); span.focus() }; }; function deleteTag() { if (this.innerText.length == 0 && search.childElementCount > 2){ search.removeChild(this); } } span1.addEventListener('keyup', createTag); span1.addEventListener('blur', deleteTag);