jQuery.on() - cómo inicializar tan pronto como se hayan cargado los elementos

Question

Estoy tratando de agregar el hoverIntent complemento a los elementos en mi página, sin embargo, algunos elementos se agregarán al DOM más adelante, lo que significa que tiene que vincular el complemento a elementos futuros también. ¿Cómo haces eso? He visto las mismas preguntas en SO algunas veces, ¿pero nadie tiene una solución clara?

Answer 1

No hay soporte en jQuery para hacer esto; es algo que el complemento debe admitir. El enfoque más común es simplemente reiniciar el complemento después de agregar contenido nuevo; que normalmente no es un problema.

Otra opción es usar el liveQuery plugin, y hacer algo como esto;

$('yourSelector').livequery(function() { 
    $(this).hoverIntent({ 
     // blah 
    }); 
}); 

Answer 2

La mejor manera de lograr esto es crear un evento personalizado cuando agrega los elementos nuevos a la página. Los suscriptores de este evento pueden llamar a los inicializadores hoverIntent apropiados.

Habrá más soporte nativo en la forma de mutation observers, sin embargo, el soporte del navegador está actualmente próximo a cero.

Escuchar el evento DOMSubtreeModifed no es confiable y causa problemas de rendimiento.

Answer 3

intente cambiar su estructura jquery;

ABC = { 
    init: function() {//all function names goes here 
     ABC.myFunction1(); 
     ABC.myFunction2(); 
     ABC.myFunction3(); 
    }, 
    myFunction1: function() { 
    //code 
    }, 
    myFunction2: function() { 
    //code 
    }, 
    myFunction3: function() { 
    //code 
    }//dont put comma last one 
} 

$(function() { 
    ABC.init();//calls all functions after everything is initialized and ready. 
}); 

Answer 4

Utilice el parámetro "selector de" para la delegación de eventos.

$('#PARENT').hoverIntent({ 
    over: function() { 
     console.log($(this)); 
    }, 
    out: function(){ 
     console.log($(this)); 
    }, 
    selector: '.CHILD' 
}); 

Fuente: hoverIntent Documentation