Tengo un problema un poco complicado aquí, estoy tratando de aplicar una línea simple de código JQuery que addClass a un div con class pop-up pero el problema es que la clase pop_up no es accesible después de jQuery(document).ready(function($){});

Esta clase se agrega realmente desde una funcionalidad externa JS y pop_up también se agrega desde un JS externo, así que me pregunto

Cómo agregar la clase usando JQuery después de que se ejecute el JS externo para que se pueda encontrar la clase pop_up usando:

$('.pop_up');

Lo que he intentado:

jQuery(document).ready(function($) {
    $('.pop_up').addClass('importantRule');
    $('.pop_up').toggleClass('importantRule');
});

Esto no funciona ya que JS externo agregó la clase de alguna manera después de .ready, por lo que si trataste de imprimir $('.pop_up') no estará definido.

También intenté buscar la clase usando un contenedor de clase constante de div.pop_up como este:

$('div.element').find('.pop_up').addClass('importantRule');

Eso tampoco funcionó, sé con certeza que el problema es llamar a la función en .ready ya que de alguna manera se ejecuta el JS externo después de eso, así que,

¿Hay algo alrededor de esto?

si no, ¿hay alguna manera de detectar si todos los archivos JS externos están listos y cargados?

4
Ahmad Sanie 10 may. 2016 a las 14:50

5 respuestas

La mejor respuesta

Puede tener $ (document) .ready () varias veces en una página. El código se ejecuta en la secuencia en que aparece.

Puede usar el evento $(window).load() para su código, ya que esto sucede después de que la página está completamente cargada y todo el código en los diversos controladores $(document).ready() ha terminado de ejecutarse.

$(window).load(function(){
  //your code here
});
4
KiwiJuicer 10 may. 2016 a las 11:55

Para evitar tiempos de espera que sugieren la mayoría de las otras respuestas, le aconsejo que intente agregar la etiqueta "aplazar" a su script. De esa manera, el script que intenta agregar la clase "importantRule" esperará hasta que todos los otros scripts se hayan cargado y ejecutado.

1
Mario Plantosar 10 may. 2016 a las 12:00

Una forma es usar un setTimeout para verificar: -

function checkForElement() {

  setTimeout(function() {

    if ($('.pop_up').length) {
      $('.pop_up').addClass('importantRule');
    } else {
      checkForElement();
    }

  }, 100);

}

checkForElement();

Esto esperará 100 ms, luego verifique. si no está allí, esperará nuevamente, y nuevamente, etc.

2
BenG 10 may. 2016 a las 11:57

Además, esta pregunta me pareció bastante similar. carga y ejecuta el orden de los scripts

¡Espero que esto ayude! Gracias

0
Community 23 may. 2017 a las 12:16

Experimenta una condición de carrera. Si el script externo termina de ejecutarse primero, su código funcionará, pero si su código termina primero, entonces se rompe.

Puede hackearlo como lo sugirió Satej S en los comentarios, y darle un tiempo de espera razonable que asegurará que el script externo termine de ejecutarse, y después de ese tiempo de espera, ejecute su script.

setTimeout(function(){ doSomething(); }, 3000);

Una mejor solución será utilizar una devolución de llamada desde el script externo (¿puede editar el script externo?). De esta manera, en el momento en que finaliza el script externo, requiere una de sus funciones internas que comenzará a funcionar.

2
Narxx 10 may. 2016 a las 11:58