jquery .live on load event

Question

Necesito una forma de utilizar la función jquery .live() para actuar sobre los elementos que se cargan a través de ajax.

Por ejemplo se carga un div a través de AJAX .load()

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

Normalmente yo .live() con un evento de clic, pero necesito saber cómo decir la DOM que este nuevo div ha cargado sin ningún tipo de acciones explícitas/eventos del usuario.

Este código no funciona, pero quiero hacer algo como esto:

mydiv = $("#mydiv"); 

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

El "mydiv.length" ser un substituto para el típico "clic" o cualquier otro evento.

Answer 1

No hay un evento "DOM cambiado" y la creación de uno es un impuesto en el navegador. Lo mejor es utilizar la devolución de llamada para que el método de carga active las funciones que necesita.

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

Answer 2

Ha visto esto todavía: http://plugins.jquery.com/project/livequery/

Answer 3

Por ejemplo (en expansión en mi comentario anterior) esto es de la documentación de jQuery ..

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

reemplazar la alerta con el código que desea ejecutar/acción que desea realizar

Answer 4

Normalmente me manejar cualquier acción que se producen cuando se carga el elemento, ya sea como parte del mecanismo de devolución de llamada AJAX o como parte de un controlador ready que se incluye en el HTML devuelto de la devolución de llamada AJAX éxito. El último funciona bien cuando desea cargar una vista parcial en la página y desea mantener el código con la vista parcial.

Vista parcial:

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

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

El uso de la devolución de llamada

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

Answer 5

Otra manera de hacer esto sería utilizar trigger() para desencadenar su propio evento personalizado (vamos a llamarlo content_loaded). load() toma una función de devolución de llamada que hace un llamamiento a la terminación:

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

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

Y entonces acaba de crear un detector de eventos y ejecutarlo cada vez que se dispara el evento.

$("your_selector").bind("content_loaded", your_results_loaded_function); 

Answer 6

No puede usar .live() con el evento "cargar". Ver un ejemplo no trabajar de lo que desea hacer aquí: http://www.jsfiddle.net/S5L6Q/

Un enfoque consiste en sondear con un temporizador:

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

Esto comprobará cada 1/10th de un segundo para ver si algunos han sido agregados. Esto puede ser realmente costoso dependiendo de la complejidad de su selector.

Otra opción es enlazar todas sus llamadas AJAX a través de un contenedor común que puede verificar la longitud y ejecutar el código si es necesario, luego ejecuta la devolución de llamada proporcionada.

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

El segundo es probablemente la mejor ruta, pero la primera podría ser más fácil.

Answer 7

¿Qué crea #mydiv? Debería poder simplemente lanzar // doSomething junto con la función que crea #mydiv.

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

#mydiv no se crea a sí mismo, después de todo. Sin embargo, estás creando #mydiv, usa esa misma función para hacer lo que necesites hacer.

Answer 8

.live no funciona con el evento de carga del extremo preparado como se indica en la documentación de jQuery 1.3 no se puede utilizar la carga y el evento en directo listo con visita http://api.jquery.com/live/ para obtener más información,

Answer 9

Yap, sigue siendo poco caro. Pero puede intentar esto:

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