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?
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();
});
#title-items
). Sie können auch hier document
verwenden, wenn Sie mit all a
-Elementen umgehen möchten.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.
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.
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;
});