Adding onClick event dynamically using jQuery

Due to a plugin being used, I can't add the "onClick" attribute to the HTML form inputs like usual. A plugin is handling the forms part in my site and it doesn't give an option to do this automatically.

Basically I have this input:

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

I want to add an onClick to it with jQuery onload for it to be like this:

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

How do I go about doing this?

I know this might not be standard practice but seems like the easiest option to do in my situation.

I'm a newbie to jQuery so any help is very much appreciated.

You can use the click event and call your function or move your logic into the handler:

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

You can use the click event and set your function as the handler:

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

---

.click() > Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

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

---

You can use the on event bound to "click" and call your function or move your logic into the handler:

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

You can use the on event bound to "click" and set your function as the handler:

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

---

.on()

> Attach an event handler function for one or more events to the > selected elements.

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

try this approach if you know your object client name ( it is not important that it is Button or TextBox )

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

try this ones if you want add onClick event to a server object with JQuery

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

Try below approach,

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

or in case jQuery is not an absolute necessaity then try below,

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

However the above method has few drawbacks as it set onclick as a property rather than being registered as handler...

Read more on this post https://stackoverflow.com/a/6348597/297641

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

Or you can use an arrow function to define it:

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

For better browser support:

$(document).ready(function() {
  $('#bfCaptchaEntry').click(function (){
    
  });
});

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

as @Selvakumar Arumugam suggested, but the function call on registering also

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

rather than use

$('#bfCaptchaEntry').on('click', () => { myfunction});