Adjuntar evento a elementos dinámicos en javascript

Estoy tratando de insertar datos html dinámicamente en una lista que se crea dinámicamente, pero cuando intento adjuntar un evento onclick para el botón que se crea dinámicamente, el evento no se activa. La solución sería muy apreciada.

Código JavaScript:

document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('btnSubmit').addEventListener('click', function () {
        var name = document.getElementById('txtName').value;
        var mobile = document.getElementById('txtMobile').value;
        var html="<ul>";
        for (i = 0; i < 5; i++) {
            html = html + '<li>' + name + i + '</li>';
        }
        html = html + '</ul>';

        html = html + '<input type="button" value="prepend" id="btnPrepend" />';
        document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html);
    });

    document.getElementById('btnPrepend').addEventListener('click', function () {
        var html="<li>Prepending data</li>";
        document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html);
    });
});

Código HTML:

<form>
    <div class="control">
        <label>Name</label>
        <input id="txtName" name="txtName" type="text" />
    </div>
    <div class="control">
        <label>Mobile</label>
        <input id="txtMobile" type="text" />
    </div>
    <div class="control">
        <input id="btnSubmit" type="button" value="submit" />
    </div>
</form>

Esto se debe al hecho de que su elemento se crea dinámicamente. Debe usar la delegación de eventos para manejar el evento.

 document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });

jquery lo hace más fácil:

 $(document).on('click','#btnPrepend',function(){//do something})

Aquí hay un artículo sobre la delegación de eventos. artículo de delegación de eventos

Existe una solución al capturar los clics en document.body y luego verificando el objetivo del evento.

document.body.addEventListener( 'click', function ( event ) {
  if( event.target.id == 'btnSubmit' ) {
    someFunc();
  };
} );

La diferencia está en cómo creas y agregas elementos en el DOM.

Si crea un elemento a través de document.createElement, agregue un detector de eventos y agréguelo al DOM. Tus eventos se dispararán.

Si crea un elemento como una cadena como esta: html += “

“`, el elemento es técnicamente solo una cadena. Las cadenas no pueden tener detectores de eventos.

Una solución es crear cada elemento con document.createElement y luego agréguelos a un elemento DOM directamente.

// Sample
let li = document.createElement('li')
document.querySelector('ul').appendChild(li)

Debe adjuntar el evento después de insertar elementos, así no adjunta un evento global en su document sino un evento específico sobre los elementos insertados.

p.ej

document.getElementById('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var name = document.getElementById('txtName').value;
  var idElement="btnPrepend";
  var html = `
    <ul>
      <li>${name}</li>
    </ul>
    <input type="button" value="prepend" id="${idElement}" />
  `;
  /* Insert the html into your DOM */
  insertHTML('form', html);
  /* Add an event listener after insert html */
  addEvent(idElement);
});

const insertHTML = (tag = 'form', html, position = 'afterend', index = 0) => {
  document.getElementsByTagName(tag)[index].insertAdjacentHTML(position, html);
}
const addEvent = (id, event="click") => {
  document.getElementById(id).addEventListener(event, function() {
    insertHTML('ul', '<li>Prepending data</li>', 'afterbegin')
  });
}

<form id="form">
  <div>
    <label for="txtName">Name</label>
    <input id="txtName" name="txtName" type="text" />
  </div>
  <input type="submit" value="submit" />
</form>

Puedes hacer algo similar a esto:

// Get the parent to attatch the element into
var parent = document.getElementsByTagName("ul")[0];

// Create element with random id
var element = document.createElement("li");
element.id = "li-"+Math.floor(Math.random()*9999);

// Add event listener
element.addEventListener("click", EVENT_FN);

// Add to parent
parent.appendChild(element);

var __ = function(){
    this.context  = [];
    var self = this;
    this.selector = function( _elem, _sel ){
        return _elem.querySelectorAll( _sel );
    }
          this.on = function( _event, _element, _function ){
              this.context = self.selector( document, _element );
              document.addEventListener( _event, function(e){
                  var elem = e.target;
                  while ( elem != null ) {
                      if( "#"+elem.id == _element || self.isClass( elem, _element ) || self.elemEqal( elem ) ){
                          _function( e, elem );
                      }
                      elem = elem.parentElement;
                  }
              }, false );
     };

     this.isClass = function( _elem, _class ){
        var names = _elem.className.trim().split(" ");
        for( this.it = 0; this.it < names.length; this.it++ ){
            names[this.it] = "."+names[this.it];
        }
        return names.indexOf( _class ) != -1 ? true : false;
    };

    this.elemEqal = function( _elem ){
        var flg = false;
        for( this.it = 0; this.it < this.context.length;  this.it++ ){
            if( this.context[this.it] === _elem && !flg ){
                flg = true;
            }
        }
        return flg;
    };

}

    function _( _sel_string ){
        var new_selc = new __( _sel_string );
        return new_selc;
    }

Ahora puede registrar eventos como,

_( document ).on( "click", "#brnPrepend", function( _event, _element ){
      console.log( _event );
      console.log( _element );
      // Todo

  });

Compatibilidad con navegador

Chrome – 4.0, Edge – 9.0, Firefox – 3.5 Safari – 3.2, Opera – 10.0 y superior

He creado una pequeña biblioteca para ayudar con esto: Fuente de la biblioteca en GitHub

<script src="https://stackoverflow.com/questions/34896106/dynamicListener.min.js"></script>
<script>
// Any `li` or element with class `.myClass` will trigger the callback, 
// even elements created dynamically after the event listener was created.
addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
    console.log('Clicked', e.target.innerText);
});
</script>

La funcionalidad es similar a jQuery.on().

La biblioteca utiliza el Elemento.coincidencias() método para probar el elemento de destino contra el selector dado. Cuando se activa un evento, la devolución de llamada solo se llama si el elemento de destino coincide con el selector dado.