Agregar evento onClick dinámicamente usando jQuery

128

Debido a que se está utilizando un complemento, no puedo agregar el atributo "onClick" a las entradas del formulario HTML como de costumbre. Un complemento está manejando la parte de formularios en mi sitio y no ofrece una opción para hacerlo automáticamente.

Básicamente tengo esta entrada:

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

Quiero agregarle un onClick con jQuery onload para que sea así:

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

¿Cómo voy a hacer esto?

Sé que esto podría no ser una práctica estándar, pero parece la opción más fácil de hacer en mi situación.

Soy un novato en jQuery, por lo que cualquier ayuda es muy apreciada.

javascript jquery html Claudio Delgado
fuente

Respuestas:

211

Puede usar el clickevento y llamar a su función o mover su lógica al controlador:

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

Puede usar el clickevento y establecer su función como controlador:

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

.hacer clic()

Vincula un controlador de eventos al evento de JavaScript "clic" o activa ese evento en un elemento.

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

Puede usar el onevento vinculado "click"y llamar a su función o mover su lógica al controlador:

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

Puede usar el onevento vinculado "click"y establecer su función como controlador:

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

.en()

Adjunte una función de controlador de eventos para uno o más eventos a los elementos seleccionados.

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

cazador
fuente
Simple y fácil de entender. Exactamente lo que quería. Otra pregunta: ¿cuál es la forma más fácil de integrar un cambio de color de fondo usando jQuery? o es mejor usar 'style.backgroundColor = "white";' en la sección de funciones?
Claudio Delgado
39

pruebe este enfoque si conoce el nombre de su objeto de cliente (no es importante que sea Button o TextBox)

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

pruebe estos si desea agregar el evento onClick a un objeto de servidor con JQuery

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Ardalan Shahgholi
fuente
Éste establece la función, sin llamarla al mismo tiempo.
Vassilis
Usar .attr onClick en lugar de .click también significa que puede asignar directamente un comando de script en lugar de llamar a una función, como "history.go(0);"o "alert('Hi!');".
Jonathan
2
Esto es exactamente lo que necesitaba, ya que quería poder definir una función separada y poder configurar la función sin llamarla. Gracias 4 años tarde.
kevin walker
1
Lo que me encanta de esta respuesta es que no llama a la función, sino que solo establece onclick
gdrt
18

Pruebe el enfoque siguiente,

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

o en caso de que jQuery no sea una necesidad absoluta, intente a continuación,

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

Sin embargo, el método anterior tiene algunos inconvenientes, ya que establece onclick como una propiedad en lugar de registrarse como controlador ...

Lea más en esta publicación https://stackoverflow.com/a/6348597/297641

Selvakumar Arumugam
fuente
Cuando dice 'Sin embargo, el método anterior', no está claro si se refiere solo al método simple de JavaScript .onclick, o si agrupa ambas versiones como una en comparación con el uso .click. Sé que en realidad es lo primero, al igual .onque registra el controlador, pero tuve que verificar en otro lugar para saberlo . Sería bueno para los futuros lectores si fuera más claro en su respuesta ...;)
AntonChanning
7 
$("#bfCaptchaEntry").click(function(){
    myFunction();
});
Parv Sharma
fuente
1 
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
GDBxNS
fuente
0

O puede usar una función de flecha para definirlo:

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

  });
});

Para una mejor compatibilidad con el navegador:

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

  });
});
Gabriel Jaime Sierra Rua
fuente
1
No veo cómo esto proporciona nada nuevo, ya que la respuesta aceptada ya sugirió el .click()método. Si utilizar funciones de flecha o funciones regulares es, en mi opinión, una discusión que no está relacionada con la pregunta formulada. Y para una mejor compatibilidad con el navegador, probablemente debería eliminar ambas funciones de flecha, no solo la primera.
AGRM
Porque es otra forma de usar jQuery
Gabriel Jaime Sierra Rua