web-dev-qa-db-fra.com

Puis-je appeler $ (document) .ready () pour réactiver tous les gestionnaires d'événements au chargement?

Quelqu'un sait-il si et comment je pourrais rappeler tous les gestionnaires d'événements en charge? Je fais référence à des fichiers .js sur lesquels je n'ai PAS le contrôle et ces bibliothèques .js font leur initialisation dans $ (document) .ready (), et ne fournissent malheureusement aucune fonction facile pour réinitialiser.

J'essaie actuellement de remplacer un gros bloc div par le contenu d'un appel ajax. Je dois donc réinitialiser les bibliothèques externes. Donc, il serait bien d’appeler $ (document) .ready () afin de réinitialiser TOUT.

Jusqu'ici, j'ai essayé ceci sur l'appel ajax:

success: function(data) {
    alert('1'); // Displays '1'
    $('#content').html(data);
    alert('2'); // Displays '2'
    $(document).ready();
    alert('3'); // Does not display
}

L'appel de $(document).ready(); échoue discrètement aussi. La console JavaScript ne montre aucune erreur. Est-ce que quelqu'un sait si cela est possible (sans modifier les fichiers de la bibliothèque javascript)?

javascriptjqueryonload
38
Mike Richards

Puisque vous avez demandé comment faire sans modifier les fichiers JS externes, je vais vous répondre. J'ai suivi la fonction .ready() dans jQuery dans le débogueur et il semble que la fonction racine appelée lorsque la page est prête est la suivante:

jQuery.ready();

Mais il semble que vous ne pouvez pas simplement le rappeler pour accomplir ce que vous voulez, car il semble que lorsqu’il se déclenche une première fois, il se dissocie des fonctions précédemment enregistrées (par exemple, en les oubliant). En tant que tel, appeler une seconde fois manuellement jQuery.ready() ne redéclenche pas les mêmes appels de fonction et je l’ai vérifié dans le débogueur (le point d’arrêt n’a été atteint qu’une fois, pas une seconde fois). 

Il semble donc que vous ne pouvez pas résoudre ce problème sans modifier l’implémentation de jQuery afin qu’elle ne se dissocie pas (pour permettre des déclenchements multiples) ou en modifiant chaque code de gestionnaire prêt à utiliser vos propres événements que vous pouvez déclencher autant de fois que nécessaire vouloir.

37
jfriend00

J'ai fait quelque chose comme:

// When document is ready...
$(function(){
    onPageLoad();
});

function onPageLoad(){
  // All commands here
}

Maintenant, je peux appeler cette fonction à tout moment.

28
Fabio Nolasco

Un moyen simple d'y parvenir consiste simplement à inventer votre propre événement comme celui-ci:

$(document).bind('_page_ready', function() { /* do your stuff here */});

Ajoutez ensuite ceci:

$(function() { $(document).fire('_page_ready'); }); // shorthand for document.ready

Et enfin, chaque fois que vous avez besoin de l'exécuter à nouveau, appelez simplement ceci:

$(document).fire('_page_ready');

[Modifier]

Si vous ne pouvez vraiment pas éditer les fichiers de script externes que j'ai créés avec un jsFiddle qui rend ce que vous voulez faire possible, vous pouvez consulter le code ici: http://jsfiddle.net/5dRxh/

Cependant, si vous ne voulez pas utiliser cela, il est important que vous ajoutiez ce script APRÈS avoir inclus jQuery, comme ceci:

<script src="jquery.js" type="text/javascript"></script>
<script>
    //script from jsFiddle (only the plugin part at the top).
</script>
<!-- All the other script-files you want to include. -->
12
Alxandr

Je ne pense pas que cela puisse être fait car jquery dissocie l’événement ready après son exécution. De la source:

// Trigger any bound ready events
if ( jQuery.fn.trigger ) {
    jQuery( document ).trigger( "ready" ).unbind( "ready" );
}
5
natedavisolds

Vous pouvez faire cela simplement.

Faire une fonction:

function REinit() {
        /// PLACE HERE ALL YOUR DOC.READY SCRIPTS
}

Placez uniquement la fonction Reinit () dans doc.ready:

$(document).ready(function(){
    REinit();
});

puis après une action ajax il suffit d'appeler 

REinit();
2
catalin87

Vous pouvez déclencher document.ready une deuxième fois si vous modifiez le contenu du corps entier

$('body').html($('body').html())
2
zoberg

Je pense qu'il est simple de changer l'événement prêt pour le succès de pjax

Changez le de:

$(document).ready(function() {
    // page load stuff
});

À:

$(document).on('ready pjax:success', function() {
    // will fire on initial page load, and subsequent PJAX page loads
});
1
Islam Wazery

Ce sera ce que vous voulez, tenez l'événement prêt jusqu'à ce que vous soyez vraiment prêt.

https://api.jquery.com/jquery.holdready/

1
Lomax

Ou essayez ceci:

jQuery.extend ({

    document_ready: function (value) {
        $(document).ready (value);
        $(document).ajaxComplete (value);
    }/* document_ready */

});

Et au lieu de définir une fonction en disant:

$(document).ready (function () { blah blah blah });

dire:

jQuery.document_ready (function () { blah blah blah });

Explication:

Toute fonction chargée dans "document_ready" sera automatiquement chargée dans "$ (document) .ready ()" et "$ (document) .ajaxComplete ()" et sera activée dans les deux cas.

0
rexthestrange

J'ai juste eu le problème que mon code ajax seulement a fonctionné si elle est appelée par la $(document).ready(function(){}); et non dans une fonction normale, je ne pouvais donc pas la boucler.
Le code consistait à charger une partie de ma page et à cause de certains erreurs de chargement Je voulais qu'il soit rappelé après une timeout. 

J'ai découvert que le code n'a pas besoin d'être dans $(document).ready(function(){}); mais peut être géré par elle et peut également être appelé par lui-même.

Ainsi, après avoir lu de nombreuses solutions de différentes pages, ce code est maintenant mélangé:

$(document).ready(loadStuff);   

function loadStuff(){   
    $.ajax({
        type: "POST",
        url: "path/to/ajax.php",
        data: { some: data, action: "setContent"},
        timeout: 1000, //only one second, for a short loading time
        error: function(){ 
            console.log("An error occured. The div will reload.");
            loadStuff(); 
        },
        success: function(){
            $("#divid").load("path/to/template.php"); //div gets filled with template
        }
    });
}
0
S.Witch