Colocación plugin de jQuery llama a elementos cargada dinámicamente a través de jQuery, en()

Question

tengo una parte de código que se carga dinámica a través de una llamada AJAX añadiendo el resultado a un elemento padre, similar a esto:

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

Ahora, con el fin de conectar un evento mouseover, me gustaría hacer algo como esto:

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

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

esto funciona lo suficientemente bien como para las funciones estándar, pero quiero conectar a un complemento de terceros (en mi caso , HoverIntent, pero realmente cualquier complemento) -

La sintaxis para fijar el complemento HoverIntent es tan así:

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

... pero quiero que esto funcione para el contenido dinámico que no estaba disponible en el momento en el documento cargado inicialmente, y algo así como $(".parent").on("hoverIntent", ".child", function(){}); no parece ser la forma correcta de hacer esto.

¿Cuál es el enfoque correcto para aplicar un complemento a los elementos cargados después del $(document).ready() inicial?

Answer 1

jquery .on funciona supervisando eventos en un objeto primario y luego llamando al controlador si el evento se originó a partir de un selector secundario coincidente. En su caso, sin embargo, el evento que desea monitorear es que el elemento cambió

Los navegadores activan el evento onchange solo para elementos de entrada (porque pueden ser modificados por un usuario).

Si cualquier otro elemento cambia, debe ser debido a javascript, por lo tanto, puede llamar a funciones después de crear contenido nuevo.

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

Hay 2 soluciones prácticas

1) Lo que suele hacer es crear un método init que se lleva a un contexto (por ejemplo, el documento).

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

Entonces llamo manualmente init cuando actualice el DOM (debe a que no siempre hay que llamar a init cuando actualice el DOM)

$.ajax({ 
    url: url, 
    data: data, 
    success: function(data){ 
    var context = $('.parent'); 
    context.html(data); 
    MyPage.init(context); //calls hoverIntent and other plugins 
    } 
}); 

2) Si realmente necesita para controlar todo, puede utilizar este plugin http://james.padolsey.com/javascript/monitoring-dom-properties/

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

Answer 2

se puede utilizar en vivo evento para unir a los elementos que quieren b e en el DOM ahora o en el futuro.

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

por lo que su complemento podría tener este aspecto

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

y se puede llamar a este plugin

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

Answer 3

He utilizado el jQuery Livequery plugin en el pasado para hacer esto