Quelle est la bonne façon de définir les fonctions javascript, à l'intérieur
$(document).ready(function () {
});
Ou juste à l'extérieur.
Ce que j'ai c'est ceci:
$(function() {
var html = '<div class ="new1" ><img id = "new2" onclick = "showPage(' + id +
');" class = "' + id +
'" src="@Url.Content("~/Images/blankpageQ.jpg")" />' +
i + '</div>');
$(".pageListQuiz")
.children('div')
.eq(numOfPages - 1)
.append(html);
function showPage() {
//some actions
}
});
Et en cliquant sur l'image jointe lève une exception:
Unhandled exception at line 3, column 1 in script block
0x800a1391 - JavaScript runtime error: 'showPage' is undefined
If there is a handler for this exception, the program may be safely continued.
(Le code js est intégré à mon code c #.). Tout fonctionne bien si je place quand même showPage() dehors. Je me demande simplement pourquoi cela ne fonctionne pas quand je le mets à l'intérieur car j'ai également des fonctions placées à l'intérieur qui fonctionnent très bien.
3 réponses
@ L'approche de Tushar
Idée: créer des fonctions et utiliser $(document).ready() pour exécuter les fonctions nécessaires.
$(document).ready(function(){
...
})
function showPage(el){
console.log(el);
}
Mon approche
Idée: vous pouvez avoir un gestionnaire d'événements au lieu de définir l'attribut onclick. L'avantage de cette approche est que vous pouvez nettoyer votre logique de génération de balisage.
Remarque, vous pouvez fusionner les deux approches. Il vaut mieux déclarer toutes les fonctions puis utiliser $(document).ready() comme fonction d'initialisation. Cela appellera simplement différentes fonctions. Si vous choisissez d'utiliser event handlers/delegates, vous pouvez également exporter tous les événements dans un fichier différent et l'appeler.
Dans votre exemple, vous créez un élément <img> dans le code HTML de la page. Quand il est cliqué, showPage() est appelé. Puisque la fonction est appelée à partir de la portée globale (comme elle est appelée à partir d'un clic sur le HTML, qui va dans la portée globale), la portée globale est recherchée pour l'existence de la fonction showPage(). Cependant, il n'existe pas à l'intérieur de la portée globale; il n'existe que dans le cadre de votre fonction $(function() {}).
Si vous souhaitez accéder à showPage() à partir de la portée globale, vous devez vous assurer qu'il y est disponible. Vous pouvez le faire en le définissant en dehors de votre construction $(function() {}) (une déclaration function crée une nouvelle étendue), ou en définissant un var en dehors de votre construction $(function() {}) et en affectant le {{X4} } fonction à cette var. Par exemple:
var showPage;
$(function() {
// Assign the function showPage() to the var showPage:
showPage = function showPage() {
// You function body.
}
});
// showPage is now available in the global scope.
L'une ou l'autre solution est OK. Vous pourriez peut-être en lire un peu sur les étendues et fermetures Javascript. Cela vous aidera à comprendre ce qui se passe ici.
Les déclarations de fonctions sont étendues comme les instructions var.
Si vous définissez une fonction dans une autre fonction, vous ne pouvez y accéder que dans le cadre de cette fonction.
Si vous souhaitez y accéder en tant que global (ce que fait un attribut d'événement intrinsèque comme onclick=), vous devez le définir comme global ou le copier dans la portée globale.
Dans ce cas, cependant, vous devez éviter d'utiliser des globaux. Vous devez également éviter d'utiliser attributs d'événement intrinsèque et construire du HTML en écrasant ensemble des chaînes.
Ceci n'est pas testé mais devrait vous donner l'idée.
$(function () {
var id = "something";
var numOfPages = 2;
var html = $("<div/>")
.addClass("new1")
.append(
$("<img/>")
.attr("id", "new2")
.on("click", showPage.bind(null, id))
.addClass(id)
.attr("src", '@Url.Content("~/Images/blankpageQ.jpg")')
);
$(".pageListQuiz")
.children('div')
.eq(numOfPages - 1)
.append(html);
function showPage(id) {
}
});