Ho una porzione di codice che viene caricata dynamicmente tramite una chiamata AJAX aggiungendo il risultato a un elemento padre, in questo modo:
Ora, per colbind un evento mouseover, vorrei fare qualcosa del genere:
$(".parent").on("mouseenter", ".child", function(){ //Do fun stuff here } $(".parent").on("mouseleave", ".child", function(){ //Undo fun stuff here }
Funziona abbastanza bene per le funzioni standard, ma voglio collegarlo a un plug-in di terze parti (nel mio caso, HoverIntent , ma qualsiasi plugin) –
La syntax per il collegamento del plugin HoverIntent è così:
$(".child").hoverIntent( makeTall, makeShort )
… ma voglio che funzioni per il mio contenuto dinamico che non era disponibile al momento del caricamento iniziale del documento e qualcosa come $(".parent").on("hoverIntent", ".child", function(){}); non sembra essere il modo giusto per farlo.
Qual è l’approccio corretto per applicare un plugin agli elementi caricati dopo l’iniziale $(document).ready() ?
jquery .on funziona monitorando gli eventi su un object padre e quindi chiamando il gestore se l’evento è stato generato da un selettore figlio corrispondente. Nel tuo caso, tuttavia, l’evento che vuoi monitorare è che l’elemento è cambiato
I browser triggersno l’evento onchange solo per gli elementi di input (poiché possono essere modificati da un utente).
Se qualche altro elemento cambia, deve essere dovuto a javascript, quindi è ansible chiamare le funzioni dopo aver creato nuovi contenuti.
$(".child", parentElementContext).hoverIntent( makeTall, makeShort )
Ci sono 2 soluzioni pratiche
1) Quello che faccio di solito è creare un metodo init che prende un contesto (come il documento).
MyPage.init = function(context) { $('.selector', context).hoverIntent(); $('.other', context).dialog(); // any other plugins };
Quindi richiamo manualmente init quando aggiorno il DOM (perché non ho sempre bisogno di chiamare init quando aggiorno dom)
$.ajax({ url: url, data: data, success: function(data){ var context = $('.parent'); context.html(data); MyPage.init(context); //calls hoverIntent and other plugins } });
2) Se hai davvero bisogno di monitorare tutto, puoi usare questo plugin http://james.padolsey.com/javascript/monitoring-dom-properties/
e quindi $('.parent').on('valuechange', function() { /* init plugins*/}
Ho usato il plugin jQuery Livequery in passato per farlo
Puoi usare live per albind un evento all’elemento che sarà nel DOM in questo momento o in futuro.
$(".parent .child").live("mouseover", function(){ //Do fun stuff here }).live("mouseout", function(){ //Undo fun stuff here });
quindi il tuo plugin potrebbe assomigliare a questo
$.fn.hoverIntent = function(mouseover, mouseout) { this.live("mouseover", mouseover).live("mouseout", mouseout); return this; };
e puoi chiamare questo plugin
$(".parent .child").hoverIntent(makeTall, makeShort).load("other_page.php");