web-dev-qa-db-fra.com

Appel de la méthode jQuery depuis l'attribut onClick en HTML

Je suis relativement nouveau dans la mise en œuvre de JQuery dans tout un système et je profite de l'occasion.

Je suis tombé sur un problème que j'aimerais trouver la bonne solution.

Voici un exemple simple de ce que je veux faire:

J'ai un bouton sur une page et sur l'événement click, je veux appeler une fonction jQuery que j'ai définie. 

Voici le code que j'ai utilisé pour définir ma méthode (Page.js):

(function($) {
 $.fn.MessageBox = function(msg) {
  alert(msg);
 };
});

Et voici ma page HTML:

<HTML>
<head>
 <script type="text/javascript" src="C:\Sandpit\jQueryTest\jquery-1.3.2.js"></script>
 <script language="javascript" src="Page.js"></script>
</head>
<body>
 <div class="Title">Welcome!</div>
 <input type="button" value="ahaha"  onclick="$().MessageBox('msg');" />
</body>
</HTML>

(Le code ci-dessus affiche le bouton, mais cliquer ne fait rien.)

Je sais que je pourrais ajouter l'événement click à l'événement document ready, mais il semble plus facile de maintenir les événements dans l'élément HTML. Cependant, je n'ai pas trouvé le moyen de le faire.

Est-il possible d'appeler une fonction jQuery sur un élément de bouton (ou un élément d'entrée)? Ou y a-t-il une meilleure façon de faire cela?

Merci

MODIFIER:

Merci pour vos réponses, il semble que je n’utilise pas JQuery correctement. J'aimerais vraiment voir un exemple de système utilisant JQuery de cette manière et comment les événements sont gérés. Si vous connaissez des exemples pour le démontrer, faites-le moi savoir.

Mon objectif sous-jacent pour l’utilisation de JQuery est d’aider à simplifier et à réduire la quantité de javascript requise pour une application Web à grande échelle.

jqueryfunction
24
Russell

Je ne pense pas qu'il y ait de raison d'ajouter cette fonction à l'espace de noms de JQuery. Pourquoi ne pas simplement définir la méthode par elle-même:

function showMessage(msg) {
   alert(msg);
};

<input type="button" value="ahaha" onclick="showMessage('msg');" />

UPDATE: Avec un léger changement dans la définition de votre méthode, je peux le faire fonctionner:

<html>
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script language="javascript">
    // define the function within the global scope
    $.fn.MessageBox = function(msg) {
        alert(msg);
    };

    // or, if you want to encapsulate variables within the plugin
    (function($) {
        $.fn.MessageBoxScoped = function(msg) {
            alert(msg);
        };
    })(jQuery); //<-- make sure you pass jQuery into the $ parameter
 </script>
</head>
<body>
 <div class="Title">Welcome!</div>
 <input type="button" value="ahaha" id="test" onClick="$(this).MessageBox('msg');" />
</body>
</html>
27
Dexter

vous avez oublié d'ajouter this dans votre fonction: passer à ceci:

<input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />
4
Puaka

cela marche....

<script language="javascript">
    (function($) {
     $.fn.MessageBox = function(msg) {
       return this.each(function(){
         alert(msg);
       })
     };
    })(jQuery);​ 
</script>

.

   <body>
      <div class="Title">Welcome!</div>
     <input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />
    </body>

modifier

vous utilisez un code jQuery à sécurité intégrée utilisant le $ alias ...

(function($) {
  // plugin code here, use $ as much as you like
})(jQuery);

ou 

jQuery(function($) {
   // your code using $ alias here
 });

notez qu'il a un mot 'jQuery' dans chacune d'elles ....

4
Reigel

Ne fais pas ça!

Évitez de mettre les événements en ligne avec les éléments! Si vous ne le faites pas, vous manquez le point de JQuery (ou l’un des plus gros du moins). 

La raison pour laquelle il est facile de définir les gestionnaires click () dans un sens et non dans l’autre est que l’autre n'est pas souhaitable. Puisque vous venez d’apprendre JQuery, respectez la convention. Ce n’est pas le moment dans votre courbe d’apprentissage pour JQuery de décider que tout le monde le fait mal et que vous avez un meilleur moyen!

4
Dave Markle

Je sais que cela a été répondu il y a longtemps, mais si cela ne vous dérange pas de créer le bouton de manière dynamique, cela fonctionne uniquement avec le framework jQuery:

$(document).ready(function() {
  $button = $('<input id="1" type="button" value="ahaha" />');
  $('body').append($button);
  $button.click(function() {
    console.log("Id clicked: " + this.id ); // or $(this) or $button
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>And here is my HTML page:</p>

<div class="Title">Welcome!</div>

0
Victor Stoddard