Befestigen Ereignis, um dynamische Elemente in javascript

Ich versuche zum einfügen von html-Daten dynamisch in eine Liste, die dynamisch erstellt, aber wenn ich versuche, an ein onclick-Ereignis für die Schaltfläche wird dynamisch erstellt, das event wird nicht gefeuert. Lösung wäre, wirklich zu schätzen.

Javascript-code:

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

});

HTML-Code:

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

Wie werden Sie die Erstellung der html?
Ich würde sagen, das ist weil das element nicht existieren, wenn Sie versuchen zu befestigen, wird der Ereignis-listener. - haben Sie einen Blick auf dieses learn.jquery.com/events/event-delegation
Bewegen Sie Ihre addEventListener in den Ereignis-listener von btnSubmit

InformationsquelleAutor Manju | 2016-01-20

javascript

81

Dies ist aufgrund, dass Ihr element wird dynamisch erzeugt und sollte man Ereignis-delegation zu handhaben Veranstaltung.
```
 document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });
```
jquery machen es einfacher:
```
 $(document).on('click','#btnPrepend',function(){//do something})
```
Hier ist ein Artikel, den man Lesen kann über die Ereignis-delegation Ereignis-delegation Artikel

Danke!!! Manchmal Reine JS-Lösung funktioniert nicht auf dem iphone, aber wenn Dokument ändern auf einigen anderen übergeordneten div, zum Beispiel, funktioniert es. Was die beste Lösung für delegation ?
Ich würde sagen, solange die "Eltern" - element wird nicht dynamisch erzeugt, sollte es funktionieren. Ich würde binden von event-handler, um der ersten übergeordneten dynamischen erstellen d-element, so dass es keine Konflikte zwischen den verschiedenen event-Handlern
Aber manchmal funktioniert es nicht auf dem iphone, auch "Eltern" - element ist nicht dynamisch erstellt werden. Hier ist exapmle, es funktioniert auf allen browser, aber nicht auf dem iphone (safary und auch chrome). Und ich verstehe nicht, warum.
dies ist nur, weil codepen verwenden eine sandbox zu wickeln alles. Wenn Sie wirklich schreiben Sie diese code in eine normale Seite wird es funktionieren
wenn Sie möchten, fügen Sie Ereignis-listener für die Kinder das element auch : stackoverflow.com/questions/16863917/...

InformationsquelleAutor jilykate

Gibt es eine Abhilfe durch die Erfassung von Klicks auf document.body und dann die Kontrolle Ereignis-Ziel.

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

InformationsquelleAutor Manasov Daniel

Können Sie etwas tun, ähnlich wie diese:

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

InformationsquelleAutor PRDeving

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

Jetzt können Sie das Ereignis registrieren wie,

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

  });

Browser-Unterstützung

Chrom - 4.0, Edge - 9.0, Firefox 3.5 Safari - 3.2, Opera 10.0 und höher

InformationsquelleAutor paranjothi

1

Habe ich eine kleine Bibliothek dabei zu helfen: Quelle Bibliothek auf GitHub
```
<script src="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>
```
Die Funktionalität ist ähnlich zu jQuery.auf().

Die Bibliothek verwendet die Element.Spiele() - Methode zu testen, das target-element gegen die angegebene Auswahl aus. Wenn ein Ereignis ausgelöst wird, wird der callback wird nur aufgerufen, wenn das Ziel-element entspricht dem Selektor gegeben.

InformationsquelleAutor Cristy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.