使用jQuery动态添加onClick事件

Question

因为使用了插件，我无法像通常一样向HTML表单输入添加“onClick”属性。 插件正在处理我的网站中的表单部分，并且它没有自动提供此选项。

基本上，我有这个输入：

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

我想在jQuery的onload事件中添加一个onClick函数，使其变成这样：

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

我该如何做到这一点呢？

我知道这可能不是标准做法，但在我的情况下似乎是最简单的选择。

我是jQuery的新手，非常感谢任何帮助。

- Claudio Delgado

Answer 1

您可以使用 click 事件并调用您的函数或将逻辑移动到处理程序中：

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

你可以使用click事件，并将你的函数设置为处理程序：

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

.click()

将事件处理程序绑定到JavaScript的“click”事件，或在元素上触发该事件。

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

---

您可以使用绑定到"click"的on事件，并调用您的函数或将逻辑移动到处理程序中：

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

您可以使用绑定到"click"的on事件，并将您的函数设置为处理程序：

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

---

.on()

为选定的元素附加一个或多个事件处理程序。

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

- hunter

---

简单易懂，正是我想要的。 另一个问题：使用jQuery实现背景颜色变化的最简单方法是什么？还是在函数部分使用“style.backgroundColor =“white”；”更好？ - Claudio Delgado

Answer 2

如果您知道对象的客户端名称（不重要是按钮还是文本框），请尝试这种方法。

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

如果你想使用 JQuery 给服务器对象添加 onClick 事件，请尝试这些方法

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

- Ardalan Shahgholi

---

这个设置函数，而不同时调用它。 - Vassilis

使用.attr onClick而不是.click也意味着您可以直接分配一个脚本命令，而不是调用一个函数，例如"history.go(0);"或"alert('Hi!');". - Jon

这正是我所需要的，因为我想定义一个单独的函数并能够设置该函数而不调用它。谢谢你四年之后才回复。 - kevin walker

我喜欢这个答案的原因是它不调用函数，只设置了onclick。 - gdrt

Answer 3

尝试以下方法：

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

如果 jQuery 不是绝对必要的话，可以尝试以下方法：

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

然而，上述方法有一些缺点，因为它将onclick设置为属性而不是注册为处理程序...

在此帖子中阅读更多信息：https://dev59.com/qGw15IYBdhLWcg3w3vle#6348597

- Selvakumar Arumugam

---

当你说“然而上述方法”时，不清楚你是只指纯JavaScript方法.onclick，还是将两个版本作为一种与使用.click进行比较的方法。我知道实际上是前者，因为.on确实注册了处理程序，但我不得不在其他地方查找才能了解这一点。如果在你的回答中更加明确，那么对于未来的读者来说会更好... ;) - AntonChanning

Answer 4

或者你可以使用箭头函数来定义它：

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

为了获得更好的浏览器支持：

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

- Gabriel Jaime Sierra Rua

---

我不明白这种方法有什么新意，因为被接受的答案已经提到了.click()方法。在我看来，使用箭头函数还是普通函数是一个与所问问题无关的讨论。为了更好地支持浏览器，您应该删除两个箭头函数，而不仅仅是第一个。 - agrm

因为是另一种使用jQuery的方式。 - Gabriel Jaime Sierra Rua

Answer 5

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

- Parv Sharma

Answer 6

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

- GDBxNS

Answer 7

如@Selvakumar Arumugam所建议的那样，在注册时调用函数也是可以的： $('#bfCaptchaEntry').on('click', myfunction); 而不是使用箭头函数： $('#bfCaptchaEntry').on('click', () => { myfunction});

- Faraz Ahmed