Adicionar evento onClick dinamicamente usando jQuery

128

Devido ao uso de um plugin, não consigo adicionar o atributo "onClick" às entradas do formulário HTML como de costume. Um plugin está lidando com a parte de formulários em meu site e não dá a opção de fazer isso automaticamente.

Basicamente, tenho esta entrada:

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

Eu quero adicionar um onClick a ele com jQuery onload para que fique assim:

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

Como faço para fazer isso?

Sei que pode não ser uma prática padrão, mas parece a opção mais fácil de fazer na minha situação.

Eu sou um novato no jQuery, então qualquer ajuda será muito apreciada.

Claudio Delgado
fonte

Respostas:

211

Você pode usar o clickevento e chamar sua função ou mover sua lógica para o manipulador:

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

Você pode usar o clickevento e definir sua função como o manipulador:

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

.clique()

Vincule um manipulador de eventos ao evento JavaScript "click" ou acione esse evento em um elemento.

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


Você pode usar o onevento associado "click"e chamar sua função ou mover sua lógica para o manipulador:

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

Você pode usar o onevento associado "click"e definir sua função como o manipulador:

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

.em()

Anexe uma função de manipulador de eventos para um ou mais eventos aos elementos selecionados.

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

caçador
fonte
Simples e fácil de se entender. Exatamente o que eu queria. Outra pergunta: qual é a maneira mais fácil de integrar uma mudança de cor de fundo usando jQuery? ou é melhor usar 'style.backgroundColor = "white";' na seção de função?
Claudio Delgado
39

tente esta abordagem se você souber o nome do cliente do seu objeto (não é importante que seja Button ou TextBox)

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

tente este se quiser adicionar um evento onClick a um objeto de servidor com JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ardalan Shahgholi
fonte
Este define a função, sem chamá-la ao mesmo tempo.
Vassilis
Usar o .attr onClick em vez de .click também significa que você pode atribuir diretamente um comando de script em vez de chamar uma função, como "history.go(0);"ou "alert('Hi!');".
Jonathan
2
Isso é exatamente o que eu precisava, pois eu queria ser capaz de definir uma função separada e ser capaz de definir a função sem chamá-la. Obrigado 4 anos atrasado.
kevin walker
1
O que eu adoro nessa resposta é que ela não chama a função, mas apenas define onclick
gdrt
18

Experimente a abordagem abaixo,

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

ou no caso de jQuery não ser uma necessidade absoluta, tente abaixo,

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

No entanto, o método acima tem poucas desvantagens, pois define onclick como uma propriedade em vez de ser registrado como manipulador ...

Leia mais nesta postagem https://stackoverflow.com/a/6348597/297641

Selvakumar Arumugam
fonte
Quando você diz 'No entanto, o método acima', não está claro se você está se referindo apenas ao método simples de javascript .onclickou agrupando as duas versões como uma em comparação ao uso .click. Eu sei que é realmente o primeiro, assim como .onregistra o manipulador, mas tive que verificar em outro lugar para aprender isso. Seria bom para futuros leitores se fosse mais claro em sua resposta ...;)
AntonChanning
7
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Parv Sharma
fonte
1
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
fonte
0

Ou você pode usar uma função de seta para defini-lo:

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

  });
});

Para melhor suporte do navegador:

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

  });
});
Gabriel Jaime Sierra Rua
fonte
1
Não vejo como isso fornece nada de novo, pois a resposta aceita já sugeria o .click()método. O uso de funções de seta ou funções regulares é, em minha opinião, uma discussão não relacionada à pergunta feita. E para um melhor suporte ao navegador, você provavelmente deve remover ambas as funções de seta, não apenas a primeira.
agrm
Porque é outra forma de usar o jQuery
Gabriel Jaime Sierra Rua