Ich versuche, das HoverIntent Plugin zu Elementen auf meiner Seite hinzuzufügen, aber einige Elemente werden später zum DOM hinzugefügt werden, was I bedeutet muss das Plugin auch an zukünftige Elemente binden. Wie machst du das? Ich habe die gleichen Fragen zu SO ein paar Mal gesehen, aber niemand hat eine klare Lösung?jQuery.on() - wie initialisiert, sobald Elemente geladen wurden
Antwort
Es gibt keine Unterstützung in jQuery, dies zu tun; Es ist etwas, das das Plugin selbst unterstützen muss. Der gängigste Ansatz besteht darin, das Plugin nach dem Hinzufügen neuer Inhalte einfach neu zu initialisieren. Das ist normalerweise kein Problem.
Eine andere Möglichkeit ist die liveQuery
plugin zu verwenden und so etwas zu tun;
$('yourSelector').livequery(function() {
$(this).hoverIntent({
// blah
});
});
Ich schrieb eine 're_init()' -Funktion, die den gesamten Code enthielt, der neu initialisiert werden musste, sobald neuer Inhalt geladen wurde. Ich merkte nur, dass es mehr Code als die ** HoverIntent **, die neu initialisiert werden musste, wenn ich mit dieser Funktion begann. –
** Für alle anderen, die über dieses Problem stolpern: ** HoverIntent unterstützt Ereignisdelegierung ohne die Notwendigkeit für zusätzliche Plugins. Siehe meine Antwort unten für ein Beispiel. –
Der beste Weg, dies zu erreichen, besteht darin, ein benutzerdefiniertes Ereignis auszulösen, wenn Sie die neuen Elemente der Seite hinzufügen. Abonnenten dieses Ereignisses können dann die entsprechenden HoverIntent-Initialisierer aufrufen.
Es wird mehr native Unterstützung in Form von mutation observers geben, aber Browser-Unterstützung ist derzeit neben Nil.
Das Abhören des Ereignisses DOMSubtreeModifed
ist nicht zuverlässig und führt zu erheblichen Leistungsproblemen.
Mutation Observer Support sieht jetzt gut aus http://caniuse.com/mutationobserver/embed –
versuchen Sie, Ihre jquery-Struktur zu ändern;
ABC = {
init: function() {//all function names goes here
ABC.myFunction1();
ABC.myFunction2();
ABC.myFunction3();
},
myFunction1: function() {
//code
},
myFunction2: function() {
//code
},
myFunction3: function() {
//code
}//dont put comma last one
}
$(function() {
ABC.init();//calls all functions after everything is initialized and ready.
});
Mit den "Selektor" Parametern für das Ereignis Delegation.
$('#PARENT').hoverIntent({
over: function() {
console.log($(this));
},
out: function(){
console.log($(this));
},
selector: '.CHILD'
});
Quelle: hoverIntent Documentation
sind Sie versuchen, bis zu warten; Bilder oder jquery Funktionen geladen? –
Verwenden Sie ein Hoverintent-Plugin, das als ein Ereignis implementiert wird, so dass es Delegierung unterstützt .. '" Hoverintent "' sollte ein Ereignis keine Methode sein: X – Esailija
@barlas Eigentlich nein, der neue Inhalt wird mit InfiniteScroll geladen. –