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

Je suis relativement nouveau dans l'implémentation de JQuery dans l'ensemble d'un système, et j'en profite.Appel de la méthode jQuery à partir de l'attribut onClick en HTML

J'ai rencontré un problème que j'aimerais trouver la résolution correcte pour.

Voici un exemple simple de cas de ce que je veux faire:

J'ai un bouton sur une page, et l'événement click je veux appeler une fonction jquery je l'ai défini.

Voici le code que je l'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 je ne fais rien.)

Je suis conscient que je pourrais ajouter l'événement click dans l'événement document prêt, mais il semble plus facile à mettre à la place de mettre les événements dans l'élément HTML à la place. Cependant, je n'ai pas trouvé un moyen de le faire.

Existe-t-il un moyen d'appeler une fonction jquery sur un élément de bouton (ou n'importe quel élément d'entrée)? Ou y a-t-il une meilleure façon de faire cela?

Merci

EDIT:

Merci pour vos réponses, il semble que je ne suis pas en utilisant JQuery correctement. J'aimerais vraiment voir un exemple d'un système utilisant JQuery de cette façon et comment les événements sont gérés. Si vous connaissez des exemples pour le démontrer s'il vous plaît faites le moi savoir. Mon objectif sous-jacent pour l'utilisation de JQuery est de simplifier et de réduire la quantité de javascript requise pour une application Web à grande échelle.

Source

2010-04-20 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 lui-même:

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

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

MISE À JOUR: Avec un petit changement à la façon dont votre méthode est définie, je peux l'obtenir au travail:

<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>

Source

2010-04-20 03:40:06 Dexter

Ceci est un exemple de fonction, pour démontrer le problème. – Russell

OK .. J'ai mis à jour avec un exemple qui fonctionne en utilisant votre méthode préférée - à la fois scoped ou non. – Dexter

Merci @Dexter, cela a bien fonctionné :) Note version 1.4.2 fonctionne, tandis que 1.3.2 ne fonctionnera pas. – Russell

vous avez oublié d'ajouter cette dans votre fonction: changement à ceci:

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

Source

2010-04-20 03:45:07 Puaka

Cela ne fonctionne toujours pas. :( – Russell

Cela ne fonctionne pas .. au moins dans mes tests – Dexter

cela fonctionne ....

<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 failsafe en utilisant l'alias $ ...il doit être écrit comme:

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

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

Notez qu'il a un mot 'jQuery' dans chacune d'elle ....

Source

2010-04-20 04:03:38 Reigel

Salut @Reigel, merci. C'est ce que je cherche :) – Russell

Est-ce un moyen commun/populaire pour gérer ce genre d'exposition à la fonction globale? – Russell

s'il vous plaît voir modifier – Reigel

Ne faites pas cela! Restez loin de mettre les événements en ligne avec les éléments! Si vous n'avez pas, you're missing the point de JQuery (ou l'un des plus grands au moins).

La raison pour laquelle il est facile de définir les gestionnaires click() dans un sens et pas dans l'autre est que l'inverse n'est pas souhaitable. Puisque vous êtes en train 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 se trompe et que vous avez une meilleure solution!

Source

2010-04-20 04:17:44

Salut @Dave, je ne dis pas que tout le monde le fait mal. Je me demande comment jquery peut "simplifier javascript" si au lieu d'ajouter des événements en ligne pour ajouter des événements à une liste d'appels de fonction javascript dans un fichier js distinct? Comment un développeur peut-il savoir quels événements sont déclenchés par quels éléments? J'apprécie votre réponse et aimerais vraiment utiliser (et travailler avec, pas contre) Jquery. :) – Russell

Il y a plusieurs façons de le faire. Vous n'avez pas besoin d'avoir un fichier JS séparé. Si vous le souhaitez, vous pouvez coller votre script dans un bloc

Je sais que cela a répondu il y a longtemps, mais si cela ne vous dérange pas de créer le bouton dynamiquement, cela fonctionne en utilisant uniquement 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>

Source

2017-04-26 22:48:19

Questions connexes

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

Répondre

Questions connexes