fonction déclarée dans document.ready est indéfini?

Si je déclare une fonction dans document.ready, j’obtiens une erreur. Comme ça

$(document).ready(function(){ function updateSizeOptions() { alert("updateSizeOptions"); } var jGrid = $("#list_main"); jGrid.jqGrid({ url:'db.php?ajaxOp=getData', colModel:[ $.extend(true, { name:'shape_id' ,index:'shape_id' ,edittype:'select' ,formatter:'select' ,editoptions: { onclick:"javascript:updateSizeOptions();" } } ,{} ] .... });

Cela donnera l’erreur: “ReferenceError: updateSizeOptions n’est pas défini”.
Mais si j’ai déplacé la fonction en dehors de document.ready, tout fonctionne bien.
Comme ça

 function updateSizeOptions() { console.debug("updateSizeOptions"); } $(document).ready(function(){ var jGrid = $("#list_main"); ....

POURQUOI ?

Parce qu’en Javascript, les fonctions déclarées dans d’autres fonctions sont des références locales et ne sont pas visibles en dehors de la scope de leur fonction parent. Si vous souhaitez rendre votre fonction updateSizeOptions accessible de manière globale, vous devez lui affecter une référence dans un espace de nom global, par exemple une propriété de window :

 window.updateSizeOptions = updateSizeOptions;

Comme vous avez défini la fonction updateSizeOptions dans la fonction anonyme passée à $(document).ready , updateSizeOptions ne sera disponible qu’à l’intérieur de cette fonction anonyme, à moins que vous ne l’ updateSizeOptions . (ie window.updateSizeOptions = updateSizeOptions )

Les fonctions (ou / et les variables) définies dans la scope globale sont définies littéralement sous l’object window . Par conséquent, si vous définissez la fonction dans la scope globale et effectuez une alert(window.updateSizeOptions) vous verrez qu’il affiche une fonction. window.updateSizeOptions == updateSizeOptions renverra la valeur true .

Cependant, si vous le définissez dans une scope locale, vous verrez undefined .

Portée. Lorsque vous mettez quelque chose dans $(document).ready , le code ne sera exécuté que lorsque cet événement est déclenché et que les variables telles que les variables et les fonctions déclarées dans l’événement n’existent pas en dehors de l’événement, à moins d’être définies globalement.

Quand vous faites javascript:updateSizeOptions(); il cherchera une fonction dans la scope globale qui dans ce cas n’existe pas, donc undefined .