Ajout dynamique d'un événement onClick à l'aide de jQuery

128

En raison d'un plugin utilisé, je ne peux pas ajouter l'attribut "onClick" aux entrées du formulaire HTML comme d'habitude. Un plugin gère la partie formulaires de mon site et ne donne pas la possibilité de le faire automatiquement.

Fondamentalement, j'ai cette entrée:

<input type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">

Je veux y ajouter un onClick avec jQuery onload pour qu'il ressemble à ceci:

<input onClick="myfunction()" type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">

Comment dois-je procéder?

Je sais que ce n'est peut-être pas une pratique courante, mais cela semble être l'option la plus simple à faire dans ma situation.

Je suis un débutant dans jQuery, donc toute aide est très appréciée.

javascript jquery html Claudio Delgado
la source

Réponses:

211

Vous pouvez utiliser l' clickévénement et appeler votre fonction ou déplacer votre logique dans le gestionnaire:

$("#bfCaptchaEntry").click(function(){ myFunction(); });

Vous pouvez utiliser l' clickévénement et définir votre fonction comme gestionnaire:

$("#bfCaptchaEntry").click(myFunction);

.Cliquez sur()

Liez un gestionnaire d'événements à l'événement JavaScript "clic" ou déclenchez cet événement sur un élément.

http://api.jquery.com/click/

Vous pouvez utiliser l' onévénement lié à "click"et appeler votre fonction ou déplacer votre logique dans le gestionnaire:

$("#bfCaptchaEntry").on("click", function(){ myFunction(); });

Vous pouvez utiliser l' onévénement lié à "click"et définir votre fonction comme gestionnaire:

$("#bfCaptchaEntry").on("click", myFunction);

.sur()

Attachez une fonction de gestionnaire d'événements pour un ou plusieurs événements aux éléments sélectionnés.

http://api.jquery.com/on/

chasseur
la source
Simple et facile à comprendre. Exactement ce que je voulais. Autre question: quel est le moyen le plus simple d'intégrer un changement de couleur d'arrière-plan à l'aide de jQuery? ou vaut-il mieux utiliser 'style.backgroundColor = "white";' dans la section fonction?
Claudio Delgado
39

essayez cette approche si vous connaissez le nom de votre client objet (il n'est pas important que ce soit Button ou TextBox)

$('#ButtonName').removeAttr('onclick');
$('#ButtonName').attr('onClick', 'FunctionName(this);');

essayez celui-ci si vous voulez ajouter l'événement onClick à un objet serveur avec JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ardalan Shahgholi
la source
Celui-ci définit la fonction, sans l'appeler en même temps.
Vassilis
L'utilisation de .attr onClick au lieu de .click signifie également que vous pouvez directement attribuer une commande de script au lieu d'appeler une fonction, comme "history.go(0);"ou "alert('Hi!');".
Jonathan
2
C'est exactement ce dont j'avais besoin, car je voulais pouvoir à la fois définir une fonction distincte et pouvoir définir la fonction sans l'appeler. Merci 4 ans de retard.
kevin walker le
1
Ce que j'aime à propos de cette réponse, c'est qu'elle n'appelle pas la fonction mais ne se déclenche que sur
clic
18

Essayez l'approche ci-dessous,

$('#bfCaptchaEntry').on('click', myfunction);

ou dans le cas où jQuery n'est pas une nécessité absolue, essayez ci-dessous,

document.getElementById('bfCaptchaEntry').onclick = myfunction;

Cependant, la méthode ci-dessus présente peu d'inconvénients car elle est définie lors du clic en tant que propriété plutôt que d'être enregistrée comme gestionnaire ...

En savoir plus sur cet article https://stackoverflow.com/a/6348597/297641

Selvakumar Arumugam
la source
Lorsque vous dites «Cependant la méthode ci-dessus», il n'est pas clair si vous faites référence uniquement à la méthode javascript simple .onclickou si vous regroupez les deux versions en une seule par rapport à l'utilisation .click. Je sais que c'est en fait le premier, tout comme le .onregistre du gestionnaire, mais j'ai dû vérifier ailleurs pour l'apprendre. Ce serait bien pour les futurs lecteurs si c'était plus clair dans votre réponse ...;)
AntonChanning
7 
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Parv Sharma
la source
1 
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
la source
0

Ou vous pouvez utiliser une fonction de flèche pour le définir:

$(document).ready(() => {
  $('#bfCaptchaEntry').click(()=>{

  });
});

Pour une meilleure prise en charge du navigateur:

$(document).ready(function() {
  $('#bfCaptchaEntry').click(()=>{

  });
});
Gabriel Jaime Sierra Rua
la source
1
Je ne vois pas en quoi cela apporte quelque chose de nouveau car la réponse acceptée suggérait déjà la .click()méthode. Que ce soit pour utiliser les fonctions fléchées ou les fonctions régulières est, à mon avis, une discussion sans rapport avec la question posée. Et pour une meilleure prise en charge du navigateur, vous devriez probablement supprimer les deux fonctions fléchées, pas seulement la première.
agrm
Parce que c'est une autre façon d'utiliser jQuery
Gabriel Jaime Sierra Rua