使用jQuery动态添加onClick事件

时间:2012-09-05 14:50:24

标签: javascript jquery html

由于使用了插件,我无法像往常一样将“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 个答案:

答案 0 :(得分:173)

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

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

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

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

<强>。点击()

  

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

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


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

"click"

您可以使用绑定到$("#bfCaptchaEntry").on("click", function(){ myFunction(); }); 的{​​{1}}事件并将您的函数设置为处理程序:

on

<强>。对()

  

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

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

答案 1 :(得分:23)

如果您知道对象客户端名称(它不是重要的是Button或TextBox),请尝试此方法

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

如果您想使用JQuery

将onClick事件添加到服务器对象,请尝试这些
$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');

答案 2 :(得分:17)

尝试以下方法,

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

或者如果jQuery不是绝对必要,那么请尝试以下,

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

然而,上面的方法有一些缺点,因为它设置onclick作为属性而不是注册为处理程序...

阅读此帖https://stackoverflow.com/a/6348597/297641

的详情

答案 3 :(得分:7)

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

答案 4 :(得分:1)

upstream prosebit {
  server prosebit:8000;
  # server localhost:8000;
}

# In case you want 'www' addresses to be automatically redirected without 'www'.
# server {
#   listen 80;
#   listen 443;
#   server_name www.threadlet.io;
#   return 301 https://threadlet.io$request_uri;
# }

server {
  listen 80;
  # removed default_server
  server_name myservername.com;
  #server_name example.com www.example.com;
  root /var/www/letsencrypt;

  location /.well-known/acme-challenge/ {
    default_type "text/plain";

    try_files $uri =404;
  }

  location / {
    return 301 https://$host$request_uri;
  }
}

server {
  listen 443 ssl;
  # removed default_server;
  server_name myservername.com;

  root /prosebit/prosebit/static;

  # client_max_body_size 10M;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers "thisisarealcipherinmyfile";
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:50m;
  ssl_session_timeout 5m;
  ssl_stapling on;
  ssl_stapling_verify on;
  resolver 8.8.8.8;
  resolver_timeout 5s;
  #add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";

  ssl_dhparam /etc/ssl/dhparam.pem;
  ssl_certificate /etc/ssl/private/threadlet.io.pem;
  ssl_certificate_key /etc/ssl/threadlet.io.key;
  ssl_trusted_certificate /etc/ssl/private/threadlet.io.pem;

  try_files $uri $uri/index.html $uri.html @prosebit;

  location @prosebit {
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_redirect off;
    proxy_pass http://prosebit;
  }
}

答案 5 :(得分:0)

或者您可以使用箭头功能来定义它:

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

  });
});

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

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

  });
});