使用jQuery动态添加onClick事件

IT技术 javascript jquery html
2021-03-20 14:35:48

由于使用了插件,我无法像往常一样将“onClick”属性添加到 HTML 表单输入中。一个插件正在处理我网站中的表单部分,它没有提供自动执行此操作的选项。

基本上我有这个输入:

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

我想用 jQuery onload 向它添加一个 onClick ,让它像这样:

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

我该怎么做?

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

我是 jQuery 的新手,所以非常感谢任何帮助。

6个回答

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

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

您可以使用该click事件并将您的函数设置为处理程序:

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

。点击()

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

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


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

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

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

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

。在()

将一个或多个事件的事件处理函数附加到所选元素。

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

简单易懂。正是我想要的。另一个问题:使用 jQuery 集成背景颜色更改的最简单方法是什么?还是最好使用 'style.backgroundColor = "white";' 在功能部分?
2021-04-26 14:35:48

如果您知道对象客户端名称,请尝试这种方法(它是 Button 还是 TextBox 并不重要)

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

如果您想使用 JQuery 将 onClick 事件添加到服务器对象,请尝试这些

$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
这正是我所需要的,因为我希望能够定义一个单独的函数并能够在不调用它的情况下设置该函数。谢谢你迟到了4年。
2021-04-25 14:35:48
使用 .attr onClick 而不是 .click 还意味着您可以直接分配脚本命令而不是调用函数,例如"history.go(0);""alert('Hi!');"
2021-04-30 14:35:48
这一个设置函数,而不是同时调用它。
2021-05-01 14:35:48
我喜欢这个答案的地方在于它不调用函数而只设置 onclick
2021-05-02 14:35:48

尝试以下方法,

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

或者如果 jQuery 不是绝对必需品,请尝试以下方法,

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

但是,上述方法几乎没有缺点,因为它将 onclick 设置为属性而不是注册为处理程序...

阅读这篇文章的更多信息https://stackoverflow.com/a/6348597/297641

当你说“但是上面的方法”时,不清楚你是指纯 javascript 方法.onclick,还是将两个版本组合为一个与使用.click. 我知道它实际上是前者,.on注册处理程序也是如此,但不得不检查其他地方以了解这一点。如果您的回答更清楚,这对未来的读者会有好处......;)
2021-05-19 14:35:48
$("#bfCaptchaEntry").click(function(){
    myFunction();
});

或者您可以使用箭头函数来定义它:

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

为了更好的浏览器支持:

$(document).ready(function() {
  $('#bfCaptchaEntry').click(function (){
    
  });
});
我没有看到这如何提供任何新的东西,因为接受的答案已经建议了该.click()方法。在我看来,是使用箭头函数还是常规函数是与所问问题无关的讨论。为了更好的浏览器支持,您可能应该删除两个箭头功能,而不仅仅是第一个。
2021-05-04 14:35:48
因为是使用 jQuery 的另一种方式
2021-05-10 14:35:48