wake-up-neo.com

die jQuery .on () -Methode sieht keine neuen Elemente

Ich bekomme ein JSON-Element und erstelle eine Liste aus den folgenden Elementen:

getTitles: function(data) {
    data = data || {};
    var list = [];

    $.getJSON(
        '/titles',
        data,
        function(data) {
            $.each(data.data, function(key, val) {
                list.Push(
                    '<li><a href="'+ val.href +'">'+ val.title +'</a><span class="count">'+ val.count +'</span></li>'
                )
            });

            $('#title-items').html(list.join(''));
        }
    );
}

Und ich bin verbindliches Klickereignis für a-Elemente wie folgt:

$('a').on('click', function(e) {
    alert('clicked');
    e.preventDefault();
});

Alte Elemente zeigen Alarm an, neue folgen der URL. Eventhandler funktioniert nicht für neue. Wie kann ich das lösen?

javascriptjqueryjavascript-eventsevent-handlingclick
46
cnkt

Sie verwenden nicht den richtigen Code, um die Funktionalität von live zu erhalten.

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});
  1. Wählen Sie zunächst Ihr gemeinsames Vorfahrenelement aus (in diesem Beispiel #title-items). Sie können auch hier document verwenden, wenn Sie mit all a-Elementen umgehen möchten.
  2. Übergeben Sie den Ereignistyp (on), dann den Unterselektor (a) und dann die Rückruffunktion für das Ereignis.

Wenn nun click-Ereignisse bis zu #title-items durchgeblasen werden, wird geprüft, ob es sich bei dem Element um ein a-Element handelt. Falls ja, wird der Rückruf ausgelöst.

131
alex

Sie möchten die Ereignisdelegierung verwenden, um Ereignisse zu erfassen, die zu Ereignissen ausgelöst werden, die zu einem beliebigen Zeitpunkt im DOM vorhanden sind:

$(<root element>).on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});

UPDATE- In diesem Beispiel ist der <root element> ein Vorfahr der Links, an die Sie binden, und die zum Zeitpunkt der Bindung im DOM vorhanden sind.

Die Grundidee ist, dass wir, da wir keinen Ereignishandler an ein DOM-Element anschließen können, das noch nicht im DOM ist, den Ereignishandler an ein Vorfahrenelement anhängen und warten müssen, bis das Ereignis zum Vorfahrenelement übergeht. Sobald das Ereignis das Vorfahrereignis erreicht, wird die event.target-Eigenschaft geprüft, um zu sehen, welches Element ursprünglich angeklickt wurde.

13
Jasper

Sie können die Bibliothek incoming.js verwenden (diese verwendet MutationObserver intern).

document.arrive('a', function(){
    // 'this' refers to the newly created element
    var newElem = this;
});
0
Uzair Farooq