Albind le chiamate del plugin jQuery agli elementi caricati dynamicmente tramite jQuery, on ()

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