button的onclick事件失效的解决方案

最新推荐文章于 2023-05-25 23:00:30 发布
最新推荐文章于 2023-05-25 23:00:30 发布
阅读量3.8k 收藏 3
点赞数
文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33524478/article/details/106828575
版权

今天在用js动态添加button标签到html中时，遇到了onclick绑定事件失效的问题。
最后发现是因为onclick绑定事件只适用于静态DOM元素，不适用于动态DOM元素。
可以在js里添加完DOM元素后，再用以下代码绑定点击事件。

 $(document).on('click','#id',function() {
        console.log("111")
 });
qq_33524478
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
调用innerHTML之后onclick失效问题的解决方法
09-04
在给出的例子二中，开发者提供了一种变通的解决方案： 1. 不再直接通过`innerHTML`替换整个`<input>`元素，而是仅修改`<input>`的`value`属性。 2. 同时，更新`<span>`元素的`name`属性，以便根据业务逻辑区分不同...
＜button＞中onclick失效
Hello World
09-13 1071
写了个按钮 ，其中的οnclick="close()"函数一直无效。 经过排查问题为函数名是与系统库名冲突 **解决：**
onclick事件没有反应的五种可能情况
qujing_1120的博客
08-07 4959
 onclick=”alert()” 事件没有反应的几种情况。 第一： 双引号包括双引号，将里面的双引号改为单引号。 第二： A没有赋值你或者 a的赋值写在了script里面，而没有写在head里面。这就是公共变量的问题。 第三 事件调用的是方法，是方法就应该加（）小括号。忘了加小括号。 第四 方法名是name（）。可能与某些关键词冲突，换一个名字或者加个123以
button绑定onclick无效
qq_38427709的博客
06-11 2619
今天我遇见一个问题，在测试onclick和addEventListener(‘click’,fn)是否生效的时候，发现onclick的方法一直无法触发，我以为是不能同时生效 box.addEventListener( 'click', () => { console.log(1) }) <button type="submit" id="box" οnclick="click()">321312</button> function click() { console
关于Form中的button按钮的onclick事件失灵的问题
comm2008的博客
04-30 6748
最近做项目时，发现button的onclick事件在没有form时是正常工作的。如果把button放到form中，类似： <form action="xxx"> <button onclick="yyy"></button> </form> 在网上找了下资料后，终于解决了，记录如下： button中的type属性规定了按钮的类型。InternetExplorer的默认类型是"button"，而其他浏览器中（包括W3C规范...
form表单中button @click事件失灵（两种思路解决）
2301_76607875的博客
04-09 2860
IE 浏览器 的按钮默认 type 是 button，而其他浏览器中 type 的默认是 submit。我用的浏览器不是IE， 所以button 的 onclick 事件会被 form 的 action 所取代。一开始我的想法是，点击搜索按钮执行 jump() 方法，将输入框内容传到新页面，但是实际情况是，点击搜索按钮后，页面无跳转（一点反应都没有），最后在同事帮助下，得到应该将input外嵌套的 form 标签删除，在删除后，页面成功跳转。我在做后端功能测试时自己写了简单前端页面，发现了此问题。
javascript 的button onclick事件不起作用的解决方法
weixin_34088598的博客
01-08 7850
在项目中遇到个问题：servlet向前端返回如下按钮，当course_ID为数字是onclick事件正常，但当course_ID含有字母时onclick事件就不起作用。网上找了很多方法都不管用，最后自己摸索到了一个方法，解决了问题。 【权记于此】 有问题者：         out.print("&lt;td&gt;&lt;input type='button' id='tb_delete_...
ListView和Button点击事件冲突处理
10-18
4. **使用GestureDetector**：另一种可能的解决方案是使用GestureDetector，它可以识别出轻触（tap）和滑动（swipe）事件。通过自定义GestureDetector的onDown()和onSingleTapUp()方法，可以实现对Button的独立点击...
验证控件与Button的OnClientClick事件详细解析
09-04
在本文中，我们将深入探讨这个问题，解析导致验证失效的原因，并提供解决方案。 一、事件触发机制 问题的核心在于，当一个Button控件具有OnClientClick事件，尤其是当该事件返回true或false时，验证控件的默认行为...
Android中EditText+Button组合导致输入板无法收起的原因分析及解决办法
09-02
对于Button，我们需要在`onClick`事件中执行特定的逻辑来确保焦点的正确转移。通过`obtainFocus`方法，我们先使Button可聚焦，然后请求焦点，最后取消可触模式，这样每次点击Button时，焦点都能正确切换，从而触发`...
点击事件的问题
02-26
在Android开发中，点击事件（Click Event）是用户与应用交互的重要方式，常见的问题和解决方案是开发者必须掌握的关键技能。本篇文章将详细讨论在Android中处理点击事件时可能遇到的问题，以及如何解决这些问题。 ...
thymeleaf 的 th:onclick，小心采坑
qq_63462564的博客
05-25 540
thymeleaf 的 th:onclick，小心采坑
javascript button onclick 失效
Stainky的专栏
01-04 1万+
今天在测试页面时定义了一个button，定义了onclick函数， button： 但是怎么点button，onclick函数就是不被触发，纠结了一个小时。 当时使用的事google浏览器，换了IE浏览器后发现浏览器提示有错误，双击查看后找到代码行，发现错误行是这么写的： function check() { alter("ok"); // 大意失荆州！！ } 特此m
input button onclick无效
bossin2014的专栏
12-16 1万+
如题。 再三确定input没写错。js方法名也没写错。然而当页面点击button 时， 却始终报找不到方法的错误。 最后将input 的属性name改了，结果就没报错了。而且整个页面name没有重名。即使重名也不该报这样的错误啊。不知为何之前总报错。 附上代码，之后研究 刷新 保存 委托收到
button 的点击事件不响应
热门推荐
感恩、奋进、自信
09-13 1万+
在项目中，给页面动态添加内容，然后给动态添加的button的点击事件不生效。在Jquery中动态添加内容如下所示： var bgbackground = '&lt;div id="bg"&gt;' + '&lt;/div&gt;'; $("body").append(bgbackground); //遮罩层 // 提...
MVC中用js写入的button按钮单击事件失效问题
weixin_33979745的博客
10-25 349
最近在写mvc时发现当用脚本写入一个button按钮时会发现当使用这个按钮的click事件竟然不执行 <script> $(document).ready(function(){ $('<input id='button' type=''button' value='单机'/>).appendTo("#ddiv"); //现在执行button的click事件...
关于button里写onclick()执行函数报错问题--xxx is not defined at HTMLButtonElement.onclick
weixin_45369499的博客
10-12 1万+
问题：今天遇见的问题是做分页排序时，点击按钮来控制page的页面。所以就在button标签里写了onclick()执行函数，但是报错了。 首先我看了一下我的代码： 发现我把onclick()执行函数放在了(document).ready(function()里，不能调用jquery中ready里面定义的函数，因为ready也相当于一个函数，即新建一局部函数作用域，外层函数不能调用内层函数里的函数...
layui中$(选择器).on(‘click‘)方法无效解决办法
qq_38181746的博客
05-25 5041
在layui中$(选择器).on(‘click’)点击事件无效的解决办法 //使用此点击事件失效 $(".sub2").on('click', function() { alert('响应点击事件'); }); //将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件 //以下可实现点击效果 $(document).on('click', '.sub2', function() { alert('响应点击事件'); }); layui.use(['jque
button onclick事件的用法
最新发布
06-28
### 回答1： "button onclick" 事件是 JavaScript 中常用的事件之一，它可以在用户点击按钮时触发。使用方法如下： 1. 在 HTML 中定义按钮： ``` <button id="myButton">点我</button> ``` 2. 在 JavaScript 中给按钮绑定事件： ``` document.getElementById("myButton").onclick = function() { alert("按钮被点击了！"); }; ``` 现在，每当用户点击该按钮，就会弹出 "按钮被点击了！" 的提示框。 ### 回答2： button onclick事件用于在按钮被点击时执行指定的JavaScript代码。这个事件处理程序函数可以在HTML代码中直接嵌入，也可以在JavaScript代码中动态添加。它通常是在一个HTML button元素上使用的，但是也可以在其他元素上使用，比如是链接和图像等元素。 在HTML上添加button onclick事件，可以使用以下格式： <button onclick="functionName()">按钮名称</button> 其中，functionName是指你要执行的JavaScript函数名称。当按钮被单击时，指定的函数将被调用并执行指定的操作。如果需要传递参数，可以在调用函数时将它们包含在括号中。 当点击按钮时，执行的操作通常是一些计算、验证、输入输出、导航或者其他类型的操作，通常需要使用JavaScript编写代码。为了编写可重用的函数，我们可以在JavaScript代码中定义一个函数，然后将其与按钮的onclick事件处理程序相连。例如： <button onclick="checkForm()">提交表单</button> function checkForm(){ if(document.forms["myForm"]["firstName"].value==""){ alert("请输入您的名字"); return false; } } 在上述示例中，我们定义了一个名为checkForm的函数，并将其与一个按钮的onclick事件关联。这个函数检查输入表单中是否填写了名称，如果没有，则显示一个弹窗提示消息。当用户点击按钮时，相应的JavaScript代码将会被执行。 button onclick事件是一种重要的HTML事件，它可以让我们在用户单击按钮时执行自己的JavaScript代码。它是Web开发中常用的技术之一，可以用于实现交互式Web应用程序和动态网页。 ### 回答3： button onclick事件是一种常见的JavaScript事件，可以在用户单击按钮时触发。其主要作用是在HTML页面中定义按钮的行为或动作。当HTML页面中的按钮被单击时，onclick事件将调用预先定义好的JavaScript函数或代码块进行处理。 button onclick事件的语法如下： <button onclick="myFunction()">Click me</button> 上面的代码定义了一个按钮，当用户单击该按钮时，会执行名为myFunction的JavaScript函数。也可以编写直接嵌入到onclick事件中的JavaScript代码块，如下所示： <button onclick="alert('Hello!')">Click me</button> 上述代码将在单击按钮时弹出一个包含“Hello!”的警告框。 此外，可以通过onclick事件在HTML页面中执行许多其他操作。例如，可以修改HTML元素的属性、创建或删除元素、执行输入验证等等。 需要注意的是，onclick事件的代码必须位于HTML标记中，并且必须在双引号中使用单引号，或者在单引号中使用双引号，否则可能会导致语法错误。 总之，button onclick事件是处理按钮单击事件的有效方法，并可用于执行各种与网页交互相关的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值