2010-06-09 22 views
51

Tengo un archivo first.js incluido en la página index.php que tiene algo como esto:

$(function(){ 

    $("#my_slider").slider("value", 10); 

}); 

Y en index.php Tengo algunas slidders dinámicamente creadas:

<?php function slidders($config, $addon) 
{ 
    $return = ' 
    <script type="text/javascript"> 
     $(function() { 
      $("#slider_'.$addon['p_cod'].'").slider({ 
      min: '.$config['min'].', 
      max: '.$config['max'].', 
      step: '.$config['step'].', 
      slide: function(event, ui) { 
       $("#cod_'.$addon['p_cod'].'").val(ui.value); 
       $(".cod_'.$addon['p_cod'].'").html(ui.value+"'[email protected]$unit.'"); 
      }, 
      change: function(event, ui) { 
       $("#cod_'.$addon['p_cod'].'").change(); 
      } 
     }); 
      $("#cod_'.$addon['p_cod'].'").val($("#slider_'.$addon['p_cod'].'").slider("value")); 
      $(".cod_'.$addon['p_cod'].'").html($("#slider_'.$addon['p_cod'].'").slider("value")+"'[email protected]$unit.'"); 
    }); 
    </script>'; 
    return $return; 
} ?> 

Los El problema es que debido a que mis controles deslizantes index.php se están instanciando después de mi first.js no puedo configurar un valor allí, ¿hay algún evento como "después de que se haya ejecutado $ (document) .ready()" que pueda usar en first.js para manipular los controles deslizantes creados en index.php?

+1

No entiendo su código. ¿Qué está tratando de lograr? Esto se bloqueará de todos modos ya que no estás escapando de los saltos de línea. – user113716

+0

Lo siento si no estaba claro, el segundo código es PHP. Ir a editar para hacerlo más claro. – mjsilva

+0

23384 vistas ... wow: D –

Respuesta

71

No saber cómo saber cuando el último $(document).ready() función disparó, pero $(window).load() la función se activa después de $(document).ready()

+0

Gracias a John esa fue la solución que acabo de cambiar mi $ (función() {("# my_slider"). Control deslizante ("valor", 10);}); para $ (ventana) .load (function() {("# my_slider"). slider ("valor", 10);}); Y funcionó. Saludos hermano! – mjsilva

+0

@mjsilva ... Me alegro de haber podido ayudar –

+4

Gire esta respuesta: a veces documenta los incendios listos después de window.load. http://stackoverflow.com/questions/20133159/the-window-load-event-fires-before-that-document-ready-event-with-cache – Toby

3

Uno de los objetivos de la función $ (documento) .ready() de jQuery es que el evento javascript window.onload estándar no se ejecutará hasta que se cargue todo en la página (incluidas imágenes, etc.), aunque las funciones puede comenzar a funcionar mucho antes de eso. Entonces $ (document) .ready() se ejecuta tan pronto como se construye la jerarquía DOM.

Dado esto, una opción sería ejecutar su script "after everything else" en la carga de la página. Sin embargo, esto no garantizará que todos los scripts $ (document) .ready() hayan sido completados.

Una opción mejor pero más complicada es crear una función que compruebe la existencia de los controles deslizantes, y si no existen, llama a "setTimeout" sobre sí mismo, por lo que puede esperar unos milisegundos y volver a intentarlo.

(Para responder a su pregunta específica, no, no hay devolución de llamada "después de todo $ (document) ready() se han quedado".)

0

Sería mejor agregar una clase única a sus controles deslizantes en lugar de la #my_slider ya que solo se activará para el elemento con id = my_slider.

Si quiere tener la misma funcionalidad, debería verificar .live desde jquery, pondrá la misma funcionalidad en los elementos que se agregan después del enlace.

Si eso no funciona para usted, entonces cuando agregue los nuevos controles deslizantes tendrá que ir a través de ellos en el DOM y llamar a la función necesaria.

+0

Hola, darren102, mis controles deslizantes tienen Ids únicos, el código que publiqué no reelege mi código de ejecución, simplemente lo publico porque es un ejemplo de lo que estaba tratando de lograr. Lo siento si eso causa una confusión, todavía soy un novato al hacer preguntas @ stackoverflow: P – mjsilva

56

Lo más seguro es invocar $(window).load()dentro de$(document).ready(). Esto preservará el orden de ejecución en todos los casos, asegurándose de que su código de última ejecución no se pase al $(window).load() hasta que se hayan completado todos los scripts $(document).ready(). Sin esto, existen condiciones de carrera posibles en algunos navegadores donde se pueden invocar $(window).load() después de que todos los scripts $(document).ready() tengan comenzados pero antes todos los scripts $(document).ready() tienen terminados.

$(document).ready(function() { 
    $(window).load(function() { 
     // this code will run after all other $(document).ready() scripts 
     // have completely finished, AND all page elements are fully loaded. 
    }); 
}); 
+1

-1 No me refiero a ser irrespetuoso, pero esto no parece ser cierto. ¿Puedes seguir explicando o dejar una referencia? ¿En qué navegadores puede ocurrir esto y qué hacen de manera diferente? Solo puedo ver que esto es cierto si los eventos JS fueron multiproceso (o el controlador DOMDocumentReady en jQuery cedió), y aun así, no creo que su solución resuelva el problema. – Toby

+2

Más detalles en esta pregunta SO: [Carga de ventana dentro de un documento listo] (http://stackoverflow.com/questions/5006922/window-load-inside-a-document-ready) Sin duda se produce en IE8. Este es un enfoque de cinturones y tirantes; es inofensivo y evita algunos casos extremos. – Ian

+0

¡Gracias por estos consejos! – Didier68

9

probar este truco aseado/truco bruto:

$(function(){ 
    $(function(){ 

     $("#my_slider").slider("value", 10); 

    }); 
}); 

parece estúpido ¿verdad? Funciona porque jQuery ejecuta los controladores de eventos en el orden en que se agregaron. Agregar un controlador de eventos en el controlador de eventos es lo más tarde posible (solo asegúrese de que no está haciendo esto en ninguno de los controles deslizantes de forma accidental, es muy fácil hacerlo).

Prueba de concepto. http://jsfiddle.net/9HhnX/

12

Sobre la base de la respuesta de Ian me di cuenta de esto (la prueba - de trabajo):

jQuery(document).ready(function() { 
    jQuery(document).ready(function() { 
     /* CODE HERE IS EXECUTED AS THE LAST .ready-CALLBACK */ 
    }); 
}); 

Por supuesto, esto se debe a que las devoluciones de llamada listas se invocan en el orden en que cuando se haya asignado. Por el momento, cuando se invoque su devolución de llamada externa, todas las demás secuencias de comandos ya deberían tener asignadas sus devoluciones de llamada listas. Por lo tanto, la asignación de su devolución de llamada lista (la interna) ahora hará que la suya sea la última.

Cuestiones relacionadas