jquery .live on load event

Question

Ho bisogno di un modo per utilizzare la funzione jquery .live() per agire sugli elementi caricati tramite ajax.

Per esempio viene caricato un div tramite la tecnologia AJAX .load()

<div id="mydiv"></div> 

Normalmente lo faccio .live() con un evento click, ma ho bisogno di sapere come dire la dom che questo nuovo div ha caricato senza azioni esplicite/eventi da parte dell'utente.

Questo codice non funziona, ma voglio fare qualcosa di simile:

mydiv = $("#mydiv"); 

mydiv.live("mydiv.length > 0", function() { 
     // do something 
}); 

Il "mydiv.length" essere substitue per il tipico "click" o altro evento.

Answer 1

Non c'è un evento "DOM modificato" e la creazione di uno è tassativo sul browser. Si consiglia di utilizzare la richiamata per il metodo di caricamento per attivare le funzioni necessarie.

$('#foobar').load('myurl.html',function() { 
    var mydiv = $("#mydiv"); 
}); 

Answer 2

Hai visto questo ancora: http://plugins.jquery.com/project/livequery/

Answer 3

Per esempio (in espansione sul mio commento di cui sopra) questo è dalla documentazione jQuery ..

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
    $('#mydiv').html(data); 
    alert('Load was performed.'); 
    } 
}); 

sostituire l'allarme con il codice che si desidera eseguire/azione che si desidera eseguire

Answer 4

genere avrei gestire tutte le azioni che si verificano quando viene caricato l'elemento sia come parte del meccanismo di callback AJAX o come parte di un gestore ready che è incluso nel restituita HTML del successo di callback AJAX. La versione successiva funziona bene quando si desidera caricare una vista parziale sulla pagina e si desidera mantenere il codice con la vista parziale stessa.

Parziale Vista:

<div id="myDiv"> 
    ... 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('#myDiv').somePlugin(...); 
    }); 
</script> 

Utilizzando la richiamata

$.ajax({ 
    url: '/example.com/code.php', 
    success: function(html) { 
      var container = $('#container').html(html); 
      $('#myDiv',container).somePlugin(...); 
    } 
}); 

Answer 5

Un altro modo per farlo sarebbe quello di utilizzare trigger() per attivare il proprio evento personalizzato (chiamiamolo content_loaded). load() prende una funzione di callback chiama al termine:

function callback_function(responseText, textStatus, XMLHttpRequest) { 
    //if we have valid data ... 
    trigger("content_loaded"); 
} 

$("your_selector").load("your_url", callback_function); 

E poi basta impostare un listener di eventi ed eseguirlo ogni volta che viene sparato il vostro evento.

Answer 6

Non è possibile utilizzare .live() con l'evento "load". Vedere un esempio di non-lavoro di quello che ci piace fare qui: http://www.jsfiddle.net/S5L6Q/

Un approccio è quello di sondaggio con un timer:

var length = $(".mydiv").length; 
setInterval(function() { 
    if ($(".mydiv").length > length) { 
    length = $(".mydiv").length; 
    // .. some code 
    } 
}, 100); 

Questo controllerà ogni 1/10 ° di secondo per vedere se alcuni sono stati aggiunti. Questo potrebbe essere molto costoso a seconda della complessità del tuo selettore.

Un'altra opzione è quella di agganciare tutte le chiamate AJAX attraverso un wrapper comune che può controllare la lunghezza ed eseguire il codice, se necessario, quindi esegue il callback fornito.

function myAjax(url, data, callback) { 
    function fullCallback(data) { 
    if ($(".mydiv").length > 0) { 
     //... your code... 
    } 
    if (callback) { 
     callback(); 
    } 
    } 
    $.get(url, data, fullCallback); 
}; 

Il secondo è probabilmente il percorso migliore, ma il primo potrebbe essere più semplice.

Answer 7

Cosa crea #mydiv? Dovresti essere in grado di lanciare // DoSomething direttamente accanto alla funzione che crea #mydiv.

$.post("myURL.html", function(data){ 
    $("#mydiv").html(data); 
    //doSomething 

#mydiv non crea se stesso, dopo tutto. Comunque stai creando #mydiv, usa la stessa funzione per fare qualsiasi altra cosa tu debba fare.

Answer 8

.Live non funziona con pronto evento carico fine, come indicato nella documentazione di jQuery 1.3 non è possibile utilizzare il carico e l'evento dal vivo pronto con visita http://api.jquery.com/live/ per ulteriori informazioni,

Answer 9

Yap, è ancora poco costoso. Ma puoi provare questo:

$(document).ready(function(){ 
    $(document).bind('DOMSubtreeModified', function() { 
     if($("#mydiv").length > 0){ 
     //Here goes your code after div load 
     } 
    }); 
});