Comment accéder à une fonction dans la portée par un événement onclick?

Question

Voici un exemple simple:

$(function(){ ///scope 
 
      function alerter(number){ 
 
       switch(number){ 
 
        case 1: 
 
         alert("first"); 
 
        break; 
 
        
 
        case 2: 
 
         alert("second"); 
 
        break; 
 
       } 
 
      } 
 
     });

#first{ 
 
      width: 300px; 
 
      height: 300px; 
 
      background: red; 
 
     } 
 
     
 
     #second{ 
 
      width: 300px; 
 
      height: 300px; 
 
      background: blue; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div id="first" onclick="alerter(1)"> 
 
    </div> 
 
    <div id="second" onclick="alerter(2)"> 
 
    </div>

Le message d'erreur indique: la fonction "alerteur n'est pas défini"

Je ne peux pas utiliser des js() (ou un EventListener) dans mon projet, il n'y a pas de pièce permanente de divs.

Bien sûr, cela fonctionnerait si la fonction "alerter" ne se trouvait pas dans la fonction scope, mais je ne veux pas déclarer de variables globales.

Merci pour l'aide!

Answer 1

Le problème ici est que "alerter" est défini dans la portée temporaire créée par l'appel à la fonction anonyme.

Si vous voulez en dehors de son champ d'application que vous devez faire quelque chose comme

window.alerter = function alerter... 

[Modifier]

Puisque vous ne voulez pas déclarer une variable « globale », vous aurez besoin coller l'événement en utilisant js, cf comment.

Et vous pouvez le faire en utilisant des événements délégués, comme la méthode "on" de jQuery. Il n'a pas besoin de divs permanents pour que ça fonctionne.

Answer 2

Si vous ne le déclarez pas comme une fonction globale, le html ne pourra pas l'appeler. Si vous ne voulez pas vous pouvez inverser votre logique et faire quelque chose comme ce qui suit.

$(function() { ///scope 
 
    $("#first").on("click", function() { 
 
    alerter(1); 
 
    }); 
 

 
    $("#second").on("click", function() { 
 
    alerter(2); 
 
    }); 
 

 
    function alerter(number) { 
 
    switch (number) { 
 
     case 1: 
 
     alert("first"); 
 
     break; 
 

 
     case 2: 
 
     alert("second"); 
 
     break; 
 
    } 
 
    } 
 
});

#first { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: red; 
 
} 
 

 
#second { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="first"> 
 
</div> 
 
<div id="second"> 
 
</div>

De cette façon, vous pouvez garder votre portée globale propre et pourtant vous aurez les mêmes fonctionnalités.

Answer 3

Cela peut être utile si vous avez expliqué ce que vous essayez d'obtenir avec ce code. Y a-t-il une raison spécifique à l'utilisation des instructions switch? Vous pouvez envisager d'utiliser l'événement jQuery .on comme indiqué par @dader. Un exemple être:

$ ("#" premier) sur (clic, function() {alert ("First")})