Aggiungere dinamicamente l'evento onClick utilizzando jQuery


128

A causa dell'utilizzo di un plug-in, non posso aggiungere l'attributo "onClick" agli input del modulo HTML come al solito. Un plugin sta gestendo la parte dei moduli nel mio sito e non offre un'opzione per farlo automaticamente.

Fondamentalmente ho questo input:

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

Voglio aggiungere un onClick ad esso con jQuery onload affinché sia ​​così:

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

Come procedo a fare questo?

So che questa potrebbe non essere una pratica standard, ma sembra l'opzione più semplice da fare nella mia situazione.

Sono un principiante di jQuery, quindi qualsiasi aiuto è molto apprezzato.

Risposte:


211

Puoi utilizzare l' clickevento e chiamare la tua funzione o spostare la logica nel gestore:

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

Puoi utilizzare l' clickevento e impostare la tua funzione come gestore:

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

.clic()

Associa un gestore di eventi all'evento JavaScript "clic" o attiva tale evento su un elemento.

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


È possibile utilizzare l' onevento associato "click"e chiamare la funzione o spostare la logica nel gestore:

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

Puoi usare l' onevento associato "click"e impostare la tua funzione come gestore:

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

.sopra()

Associa una funzione di gestore eventi per uno o più eventi agli elementi selezionati.

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


Semplice e di facile comprensione. Esattamente quello che volevo. Un'altra domanda: qual è il modo più semplice per integrare un cambio di colore di sfondo utilizzando jQuery? oppure è meglio usare 'style.backgroundColor = "white";' nella sezione delle funzioni?
— Claudio Delgado

39

prova questo approccio se conosci il nome del tuo client oggetto (non è importante che sia Button o TextBox)

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

prova questi se vuoi aggiungere l'evento onClick a un oggetto server con JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');

Questo imposta la funzione, senza chiamarla allo stesso tempo.
— Vassilis

L'uso di .attr onClick invece di .click significa anche che puoi assegnare direttamente un comando di script invece di chiamare una funzione, come "history.go(0);"o "alert('Hi!');".
— Jonathan

2
Questo è esattamente ciò di cui avevo bisogno, poiché volevo essere in grado di definire una funzione separata ed essere in grado di impostare la funzione senza chiamarla. Grazie 4 anni di ritardo.
— kevin walker

1
Quello che mi piace di questa risposta è che non chiama la funzione ma imposta solo su
— clic

18

Prova sotto l'approccio,

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

o nel caso in cui jQuery non sia una necessità assoluta, prova di seguito,

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

Tuttavia, il metodo sopra ha alcuni inconvenienti in quanto imposta onclick come proprietà anziché essere registrato come gestore ...

Leggi di più su questo post https://stackoverflow.com/a/6348597/297641


Quando dici "Tuttavia il metodo sopra", non è chiaro se ti riferisci solo al semplice metodo javascript .onclicko raggruppa entrambe le versioni come una rispetto all'utilizzo .click. So che in realtà è il primo, così come .onregistra il gestore, ma ho dovuto controllare altrove per scoprirlo. Sarebbe positivo per i futuri lettori se fosse più chiaro nella tua risposta ...;)
— AntonChanning


1
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");

0

Oppure puoi usare una funzione freccia per definirlo:

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

  });
});

Per un migliore supporto del browser:

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

  });
});

1
Non vedo come questo fornisca qualcosa di nuovo poiché la risposta accettata ha già suggerito il .click()metodo. Se utilizzare funzioni freccia o funzioni regolari è, a mio parere, una discussione non correlata alla domanda posta. E per un migliore supporto del browser dovresti probabilmente rimuovere entrambe le funzioni delle frecce, non solo la prima.
— agrm

Perché è un altro modo per utilizzare jQuery
— Gabriel Jaime Sierra Rua
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.