61 votes

Après que tous les $(document).ready() ont été exécutés, y a-t-il un événement pour cela ?

J'ai un fichier first.js inclus dans la page index.php qui a quelque chose comme ceci :

$(function(){

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

});

Et eux dans index.php j'ai quelques slidders créés dynamiquement :

<?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+"'.@$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")+"'.@$unit.'");
    });
    </script>';
    return $return;
} ?>

Le problème est que, comme mes curseurs index.php sont instanciés après mon first.js, je ne peux pas y configurer une valeur. Existe-t-il un événement du type "après que tous les $(document).ready() aient été exécutés" que je puisse utiliser dans first.js pour manipuler les curseurs créés dans index.php ?

74voto

John Hartsock Points 36565

Je ne sais pas comment dire quand la dernière $(document).ready() a été déclenchée, mais $(window).load() se déclenche après que la fonction $(document).ready()

63voto

Ian Points 503

La chose la plus sûre à faire est d'invoquer $(window).load() à l'intérieur de $(document).ready() . Cela préservera l'ordre d'exécution dans tous les cas en s'assurant que votre code d'exécution en dernier n'est pas passé à la commande $(window).load() jusqu'à ce que tous $(document).ready() scripts sont terminés. Sans cela, il existe des conditions de course possibles dans certains navigateurs dans lesquels $(window).load() peut être invoqué après tous les $(document).ready() scripts ont a commencé mais avant tout $(document).ready() scripts ont terminé .

$(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.
    });
});

18voto

Matmarbon Points 1448

En me basant sur la réponse de Ian, j'ai trouvé cette solution (testée - fonctionne) :

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

Bien sûr, cela est dû au fait que les callbacks prêts sont invoqués dans l'ordre où ils ont été assignés. En ce moment, lorsque votre ready callback externe est invoqué, tous les autres scripts devraient avoir leurs ready callbacks déjà assignés. Donc en assignant votre ready callback (l'interne) ahora conduira à ce que la vôtre soit la dernière.

14voto

Richard Kuenz Points 11

Essayez cette astuce géniale :

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

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

    });
});

Ça a l'air stupide, non ? Cela fonctionne parce que jQuery exécute les gestionnaires d'événements dans l'ordre où ils ont été ajoutés. L'ajout d'un gestionnaire d'événements dans votre gestionnaire d'événements est à peu près aussi tardif que possible (assurez-vous simplement que vous ne faites pas cela sur l'un des curseurs par accident ; c'est très facile à faire).

Preuve de concept. http://jsfiddle.net/9HhnX/

3voto

Jacob Mattison Points 32137

L'un des objectifs de la fonction $(document).ready() de jQuery est que l'événement standard javascript window.onload ne s'exécute pas avant que tout ce qui se trouve sur la page soit chargé (y compris les images, etc.), même si les fonctions peuvent utilement commencer à s'exécuter bien avant. Ainsi, $(document).ready() s'exécute dès que la hiérarchie DOM est construite.

Dans ces conditions, une option serait d'exécuter votre script "après tout le reste" au chargement de la page. Cela ne garantira pas que tous les script de $(document).ready() soient terminés, cependant.

Une meilleure option, mais plus compliquée, consiste à créer une fonction qui vérifie l'existence des curseurs et, s'ils n'existent pas, appelle "setTimeout" sur elle-même, afin de pouvoir attendre quelques millisecondes et réessayer.

(Pour répondre à votre question spécifique, non, il n'y a pas de callback "après que tous les $(document).ready() aient été exécutés").

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X