Dynamisches Hinzufügen eines onClick-Ereignisses mithilfe von jQuery

128

Aufgrund der Verwendung eines Plugins kann ich das Attribut "onClick" nicht wie gewohnt zu den HTML-Formulareingaben hinzufügen. Ein Plugin verarbeitet den Formularteil auf meiner Website und bietet keine Option, dies automatisch zu tun.

Grundsätzlich habe ich diesen Input:

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

Ich möchte einen onClick mit jQuery onload hinzufügen, damit es so aussieht:

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

Wie mache ich das?

Ich weiß, dass dies möglicherweise keine Standardpraxis ist, aber in meiner Situation scheint dies die einfachste Option zu sein.

Ich bin ein Neuling bei jQuery, daher wird jede Hilfe sehr geschätzt.

Claudio Delgado
quelle

Antworten:

211

Sie können das clickEreignis verwenden und Ihre Funktion aufrufen oder Ihre Logik in den Handler verschieben:

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

Sie können das clickEreignis verwenden und Ihre Funktion als Handler festlegen:

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

.klicken()

Binden Sie einen Ereignishandler an das JavaScript-Ereignis "click" oder lösen Sie dieses Ereignis für ein Element aus.

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


Sie können das onan "click"Ihre Funktion gebundene Ereignis verwenden und es aufrufen oder Ihre Logik in den Handler verschieben:

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

Sie können das an ongebundene Ereignis verwenden "click"und Ihre Funktion als Handler festlegen:

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

.auf()

Fügen Sie den ausgewählten Elementen eine Ereignishandlerfunktion für ein oder mehrere Ereignisse hinzu.

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

Jäger
quelle
Einfach und leicht zu verstehen. Genau das, was ich wollte. Eine andere Frage: Was ist der einfachste Weg, um eine Änderung der Hintergrundfarbe mit jQuery zu integrieren? oder ist es besser, 'style.backgroundColor = "white";' im Funktionsbereich?
Claudio Delgado
38

Versuchen Sie diesen Ansatz, wenn Sie den Namen Ihres Objektclients kennen (es ist nicht wichtig, dass es sich um Button oder TextBox handelt).

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

Probieren Sie diese aus, wenn Sie einem Serverobjekt mit JQuery ein onClick-Ereignis hinzufügen möchten

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ardalan Shahgholi
quelle
Dieser setzt die Funktion, ohne sie gleichzeitig aufzurufen.
Vassilis
Wenn Sie .attr onClick anstelle von .click verwenden, können Sie auch direkt einen Skriptbefehl zuweisen, anstatt eine Funktion wie "history.go(0);"oder aufzurufen "alert('Hi!');".
Jonathan
2
Dies ist genau das, was ich brauchte, da ich sowohl eine separate Funktion definieren als auch die Funktion festlegen konnte, ohne sie aufzurufen. Vielen Dank 4 Jahre zu spät.
Kevin Walker
1
Was ich an dieser Antwort liebe, ist, dass sie die Funktion nicht aufruft, sondern nur onclick
gdrt
18

Versuchen Sie unten Ansatz,

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

oder falls jQuery nicht unbedingt erforderlich ist, versuchen Sie es weiter unten:

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

Die obige Methode hat jedoch nur wenige Nachteile, da sie onclick als Eigenschaft festlegt und nicht als Handler registriert wird ...

Lesen Sie mehr in diesem Beitrag https://stackoverflow.com/a/6348597/297641

Selvakumar Arumugam
quelle
Wenn Sie "Allerdings die obige Methode" sagen, ist nicht klar, ob Sie nur auf die einfache Javascript-Methode verweisen .onclickoder beide Versionen im Vergleich zur Verwendung als eine gruppieren .click. Ich weiß, dass es tatsächlich das erstere ist, ebenso .onwie das Registrieren des Handlers, musste aber woanders nachsehen, um das zu erfahren. Es wäre gut für zukünftige Leser, wenn es in Ihrer Antwort klarer wäre ...;)
AntonChanning
7
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Parv Sharma
quelle
1
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
quelle
0

Oder Sie können eine Pfeilfunktion verwenden, um sie zu definieren:

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

  });
});

Für eine bessere Browserunterstützung:

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

  });
});
Gabriel Jaime Sierra Rua
quelle
1
Ich sehe nicht, wie dies etwas Neues liefert, da die akzeptierte Antwort die .click()Methode bereits vorgeschlagen hat . Ob Pfeilfunktionen oder reguläre Funktionen verwendet werden sollen, ist meiner Meinung nach eine Diskussion, die nicht mit der gestellten Frage zusammenhängt. Und für eine bessere Browserunterstützung sollten Sie wahrscheinlich beide Pfeilfunktionen entfernen, nicht nur die erste.
Agrm
Weil ist eine andere Möglichkeit, jQuery zu verwenden
Gabriel Jaime Sierra Rua