Più istanze di plugin jQuery in html caricato da ajax

Sto utilizzando più plugin di caricamento File Blueimp in html ajax-caricato:

$('.edit').click(function(){ $( "#details" ).show(); $('#details div').html(ajax_spinner).load(script.php, "parameters"); }); 

Quindi quando si sceglie qualcosa di class = "edit" si visualizza un nuovo div id = "details" (ma è stato nel DOM quando document.ready) e script.php restituisce un module id = "upload" (che non è mai visibile in "sorgente di vista", anche se è presente nella pagina ..?

Qual è la regola / buona pratica per trattare con html aggiunti dopo il documento? Già?

Adesso c'è un nuovo elemento in questo "DOM virtuale":

 <form id="upload" method="post" action="other_script.php" enctype="multipart/form-data"> <div id="drop"> DROP HERE <small>Image .png or .jpg</small> <a class="btn mr_button">Browse</a> <input type="file" name="upl" /> </div> <ul id="mr_uploaded_files_ul"> <!-- The global progress bar --> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> <!-- The file uploads will be shown here --> </ul> </form> 

E quando cerco di agire su questa parte "invisibile" del DOM:

 $('#drop a').click(function(){ alert('Nope. Nothing'); }); 

Solo quando io

 $(document).on('click', '#drop a', function() { alert('Ah, this works'); }); 

Ma ho bisogno di più di un allarme. L'intera suite $('#upload').fileupload({ ... }) suite di richiamata non viene eseguita, probabilmente a causa di questo problema "esistenza" di DOM. BTW Io uso questa stessa implementazione in altre pagine, su un semplice DOM esistente e funziona.

Come posso agire su quegli elementi DOM appena nati?

Aggiungere una function di richiamata alla chiamata di load e inizializzare il module.

 $('#details div').html(ajax_spinner).load(script.php, "parameters", function() { $('#upload').fileupload({ ... }); }); 

Quando si utilizza un selettore jQuery, come $ ('# upload'), questi elementi devono già esistere. Il module di caricamento non esiste solo dopo che è stato caricato, in modo che il selettore ritorni vuoto fino al termine del carico.

Il motivo per cui funziona l'allarme

 $(document).on('click', '#drop a', function() { alert('Ah, this works'); }); 

è dovuta alla delegazione degli events. Per saperne di più: http://learn.jquery.com/events/event-delegation/