Cuando cambias, el navegador innerHTML reconstruye el contenido del elemento, eliminando todos los controladores de eventos adjuntos. Utilice métodos DOM en su lugar:

 for (let i = 0; i < objects.length; i++){ var block = document.createElement('div'); block.setAttribute('id', i); document.getElementById('list').appendChild( block ); block.addEventListener("mouseup", function() { Select(this); }); }

UPD: alternativamente use un método insertAdjacentHTML en lugar de redefinir innerHTML :

 document.getElementById('list').insertAdjacentHTML( 'beforeend', "<div id='"+ i +"'>" + i + "</div>");

La razón es la forma en que está agregando. innerHtml += sobrescribe efectivamente el contenido existente en la lista. Por lo tanto, todos los elementos que agregó y vinculó simplemente desaparecen y se agregan nuevos elementos cada vez.

Hay un par de maneras de hacer que esto funcione.

Primero, en lugar de asignar un HTML interno, puede agregar elementos.

 const items = ['taco', 'apple', 'pork']; const list = document.getElementById("list"); for (const item of items) { const el = document.createElement("div"); el.addEventListener('click', (e) => console.log(`clicked ${item}`)); el.innerText = item; list.appendChild(el); }

 <div id="list"></div>

Dado que estamos agregando un elemento explícito y no sobrescribiendo el contenido, esto funcionará.

Un mejor enfoque sería utilizar la delegación . Asignamos un solo controlador de eventos a la lista y escuchamos cualquier clic. Luego averiguamos en qué elemento específico se hizo clic.

 const items = ['taco', 'apple', 'pork']; const list = document.getElementById("list"); const add = document.getElementById("add"); list.addEventListener('click', (e) => { const parent = e.target.closest("[data-item]"); if (parent != null) { console.log(`clicked on ${parent.dataset['item']}`); } }); for (const item of items) { list.innerHTML += `<div data-item="${item}">${item}</div>`; } add.addEventListener('click', () => { const item = `item ${Date.now()}`; list.innerHTML += `<div data-item="${item}">${item}</div>`; })

 <div id="list"></div> <button id="add">add</button>

La magia aquí es que asignamos un solo controlador de eventos en el padre y usamos el closest para averiguar en qué elemento se hizo clic. Estoy usando innerHTML aquí por simplicidad, pero debe evitarse por razones de seguridad .

Un buen patrón para usar cuando sea apropiado es la delegación de eventos . Permite seguir el principio Don't Repeat Yourself, lo que facilita considerablemente el mantenimiento del código y, potencialmente, hace que los scripts se ejecuten significativamente más rápido. Y en su caso, evita los escollos de que un elemento se encargue de modificar su propio contenido.

Por ejemplo:

 const container = document.getElementById('container'); container.addEventListener("click", toggleColor); // Events bubble up to ancestors function toggleColor(event) { // Listeners automatically can access triggering events const clickedThing = event.target; // Event object has useful properties if(clickedThing.classList.contains("click-me")){ // Ensures this click interests us clickedThing.classList.toggle("blue"); } }

 .click-me{ margin: 1em 1.5em; padding 1em 1.5em; } .blue{ color: blue; }

 <div id="container"> <div id="firstDiv" class="click-me">First Div</div> <div id="firstDiv" class="click-me">Second Div</div> </div>