Attacher un événement aux éléments dynamiques en javascript

J'essaie d'insérer des données html dynamiquement à une liste qui est créé dynamiquement, mais quand je tente de joindre un événement onclick du bouton qui est créé dynamiquement l'événement n'est pas à la cuisson. La Solution serait vraiment apprécié.

Code 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);
});

});

Code 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>

source d'informationauteur Manju

  1. 34

    C'est dû à votre élément est créé dynamiquement et vous devriez événement délégation pour gérer l'événement.

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

    jquery rendre plus facile:

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

    Voici un article que vous pouvez lire à propos de l'événement délégation cas de délégation l'article

  2. 4

    Il existe une solution de contournement par la capture de clics sur document.body et puis vérification de la cible de l'événement.

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

    Vous pouvez faire quelque chose de similaire à ceci:

    //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);
  4. 0
    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;
}

    Maintenant, vous pouvez créer des événements comme,

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

    Prise En Charge Du Navigateur

    chrome 4.0, Bord - 9.0, Firefox - 3.5 Safari 3.2, Opéra - 10.0 et au-dessus de