Estoy haciendo una aplicación para tomar notas y la idea aquí es que estoy tratando de hacer una función de selección para transferir mis notas de la lista lateral al editor en el lado derecho de la pantalla cuando se hace clic. Así que tengo todos los elementos de la lista que se crean dinámicamente mientras que el ul se crea estático.

El problema al que me enfrento es lo difícil que es hacer clic en los elementos de la lista. Lo tengo console.log el trabajo "haga clic" cada vez que se registra y no estoy seguro de por qué no funciona como si suponga que parece que solo se registra cuando hago clic en los márgenes de los elementos secundarios de li y no en las etiquetas h1 o p Además, si hago clic en el lado, hace que mi ul se pueda hacer clic, lo que no es bueno, ya que arrojaría todo en el editor.

Lo tengo así cuando se crean las etiquetas li. Luego crea dinámicamente a través de JS, agrega li, h1, p, p. Agrega las etiquetas h1,p,p a la li y luego la li al contenedor.

A continuación se muestra un ejemplo de mi código:

 //This is just to show you what happens when you click //the submit button and how my divs are being dynamically created. //I have them being created automatically from //localstorage on load as well in this same fashion. submitbutton.addEventListener('click', () => { //Creating local variables for new notes let NewNoteContainer = document.createElement('li') let NewNoteTitle = document.createElement('h1') let NewNoteDueDate = document.createElement('p') let NewNoteContent = document.createElement('p') let RemoveButton = document.createElement('button') //Adds values of the input boxes to the newley created Elements NewNoteContainer.id = NoteID NewNoteContainer.className = 'notes-list-item' NewNoteTitle.innerHTML = title.value NewNoteDueDate.innerHTML = dueDate.value NewNoteContent.innerHTML = content.value //This appends the newly created elements to the container and then //Appends the container to its div "note-list-container" NewNoteContainer.append(NewNoteTitle, NewNoteDueDate,NewNoteContent) NoteListContainer.append(NewNoteContainer) //Creates an array, makes it a JSON string. Then stores it in localStorage let StorageArray = [NoteID,title.value,dueDate.value,content.value] localStorage.setItem('Note' + NoteID, JSON.stringify(StorageArray)) NoteID += 1 }) //This is the debug function im using to try and diag the click issue. NoteListContainer.addEventListener('click', (a) => { if(a.target.parentNode.className == 'notes-list-container') { console.log('click') } })