Anexar evento a elementos dynamics em javascript

Eu estou tentando inserir dados html dinamicamente para uma lista que é criada dinamicamente, mas quando eu tento append um evento onclick para o botão que é criado dinamicamente o evento não está triggersndo. Solução seria muito 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 = '
    '; for (i = 0; i < 5; i++) { html = html + '
  • ' + name + i + '
  • '; } html = html + '
'; html = html + ''; document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html); }); document.getElementById('btnPrepend').addEventListener('click', function () { var html = '
  • Prepending data
  • '; document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html); });

    });

    Código HTML:

      

    Isso ocorre porque seu elemento é criado dinamicamente e você deve delegar o evento para manipular o evento.

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

    jquery torna mais fácil:

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

    Aqui está um artigo que você pode ler sobre o artigo de delegação de evento de delegação de evento

    Você precisa append o evento após a criação do elemento. Gostar :

     document.addEventListener('DOMContentLoaded', function() { document.getElementById('btnSubmit').addEventListener('click', function() { var name = document.getElementById('txtName').value; var mobile = document.getElementById('txtMobile').value; var html = '
      '; for (i = 0; i < 5; i++) { html = html + '
    • ' + name + i + '
    • '; } html = html + '
    '; html = html + ''; document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html); document.getElementById('btnPrepend').addEventListener('click', function() { var html = '
  • Prepending data
  • '; document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html); }); }); });
     

    Há uma solução alternativa, capturando cliques no document.body e, em seguida, verificando o destino do evento.

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

    Você pode fazer algo semelhante a isto:

     // 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; } 

    Agora você pode registrar o evento como,

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

    Suporte de Navegador

    chrome - 4.0, Edge - 9.0, Firefox - 3.5 Safari - 3.2, Opera - 10.0 e superior