Collegamento plug jQuery chiede agli elementi caricati dinamicamente tramite jQuery, on()

Question

Ho una porzione di codice caricato dinamicamente tramite una chiamata AJAX aggiungendo il risultato a un elemento genitore, simile a questo:

<div class="parent"> 
    <!-- Inner content loaded dynamically --> 
    <div class="child"> 
    </div> 
    <div class="child"> 
    </div> 
    <!-- ... --> 
</div> 

Ora, al fine di collegare un evento mouseover, vorrei fare qualcosa di simile:

$(".parent").on("mouseenter", ".child", function(){ 
//Do fun stuff here 
} 

$(".parent").on("mouseleave", ".child", function(){ 
//Undo fun stuff here 
} 

questo funziona abbastanza bene per funzioni standard, ma voglio collegare ad un plug-in di terze parti (nel mio caso , HoverIntent, ma davvero qualsiasi plugin) -

La sintassi per collegare il plugin hoverIntent è così così:

$(".child").hoverIntent(makeTall, makeShort) 

... ma voglio far funzionare tutto questo per il mio contenuti dinamici che non era disponibile al momento del documento caricato inizialmente, e qualcosa come $(".parent").on("hoverIntent", ".child", function(){}); non sembra essere il modo giusto per farlo.

Qual è l'approccio corretto per applicare un plug-in agli elementi caricati dopo l'iniziale $(document).ready()?

Answer 1

jquery .on funziona monitorando gli eventi su un oggetto padre e quindi chiamando il gestore se l'evento ha avuto origine da un selettore figlio corrispondente. Nel tuo caso, tuttavia, l'evento che desideri monitorare è che l'elemento è stato modificato

I browser attivano l'evento onchange solo per gli elementi di input (poiché possono essere modificati da un utente).

Se qualsiasi altro elemento cambia, deve essere causa di javascript, quindi è possibile chiamare le funzioni dopo aver creato nuovi contenuti.

$(".child", parentElementContext).hoverIntent(makeTall, makeShort) 

Ci sono 2 soluzioni pratiche

1) Quello che tipicamente fare è creare un metodo init che prende un contesto (ad esempio il documento).

MyPage.init = function(context) { 
    $('.selector', context).hoverIntent(); 
    $('.other', context).dialog(); // any other plugins 
}; 

Poi chiamo manualmente init quando aggiorno il DOM (perché io non sempre bisogno di chiamare init quando aggiorno il 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 si ha realmente bisogno di monitorare tutto, può usare questo plugin http://james.padolsey.com/javascript/monitoring-dom-properties/

e poi $('.parent').on('valuechange', function() { /* init plugins*/}

Answer 2

È possibile utilizzare Live per collegare evento elemento che b e nel DOM in questo momento o in futuro.

$(".parent .child").live("mouseover", function(){ 
    //Do fun stuff here 
}).live("mouseout", function(){ 
    //Undo fun stuff here 
}); 

in modo che il plug-in potrebbe essere la seguente

$.fn.hoverIntent = function(mouseover, mouseout) { 
    this.live("mouseover", mouseover).live("mouseout", mouseout); 
    return this; 
}; 

ed è possibile chiamare questo plugin

$(".parent .child").hoverIntent(makeTall, makeShort).load("other_page.php"); 

Answer 3

Ho usato il jQuery Livequery plugin in passato per fare questo