给按钮绑定的click事件无效

1. 原因分析:按钮是发送 Ajax 请求,成功请求到数据后,使用 JQuery 动态生成的。Ajax 请求是异步刷新机制,不会等上面的代码执行完。因此给这种类型的按钮绑定点击事件时,按钮还没有被创建出,那么,click事件自然不会绑定到按钮上。

2. 解决办法:

① 在按钮创建的时候就绑定事件。

② 使用 JQuery 的 .live() 方法:给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。但是在 JQuery 1.7开始的版本中被删除了,应该使用 .on() 来添加事件处理。使用旧版本的用户,应该优先使用 .delegate() 来替代 .live()。

③ 使用 JQuery 1.7 中新添加的 .on() 添加事件处理。

3. .on() 具体使用可参考官方文档:https://www.runoob.com/manual/jquery/

原文地址:https://www.cnblogs.com/lveyHang/p/11788015.html

时间: 2024-11-10 18:08:48

给按钮绑定的click事件无效的相关文章

动态生成DOM元素绑定click事件无效问题

在页面里,jq动态生成dom节点,该节点的click事件无效. 如,html里动态添加class名为.del的<a>, js文件中: $('.del').bind('click',fuction(){ alert('sda'); }) 不响应, 网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件, 解决方法: on()事件 代码改为: $(document).on('click','.del',fuction(){ alert('sda'); }) 这样就搞定了

给所有的td单元格绑定一个click事件

$(document).ready(function() { //给所有的td单元格绑定一个click事件 //如果这个table的id为table1,那单给table1的所有td加click事件代码为: // var tds = $("#table1").find("td"); var tds = $("td"); tds.click(tdclick); }); function tdclick() { //var td = $(this);

在微信公众号开发(微站)过程中用Zepto/jquery的on/live绑定的click事件点击无效(不能执行)

问题描述 当使用委托给一个非button.a标签元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 <a> 或者 button 等可点击的?元素 ?将 click 事件委托到?????非 document 或 body 的??父级元素上 ?给?目

jquery添加的html元素按钮为什么不执行类样式绑定的click事件

代码举例: 更多按钮: <input type="button" class="addMore" id="addMore${issue.id }" value="更多" /> 点击按钮添加一行文本框和“提交”按钮:(没有问题,可以正常添加) $(".addMore").click(function(){ var index = this.id.substring(7,this.id.length

动态添加DOM时,绑定的click事件会重复执行

最近因为业务需求,需要重写window的alert和confirm弹窗,但是每次显示的提示按钮不相同,所有每次打开的弹窗都需要重写生成,但是对于相同的按钮会保留上次创建时的click事件,所以当你创建了多少次弹窗,你下次单击该按钮就会执行多少次,面对这个问题有两个解决方法: 1,每次关闭弹窗时都将其销毁,destory() 方法,将创建的dom从document中remove()掉: 2,将一些公共的btn设置为公用的dom,不需要每次都进行创建,这样在下一次为其btn绑定click事件时,un

属性.native用于解决第三方el组件库@click事件无效

描述 有时发现用一些第三方的组件库时,例如一个封装好的button按钮<el-butten>,绑定点击事件却没有任何作用,这时便需要加 .native 原因: v-on 是对 Vue 的事件体系封装后的 API 接口,官方文档中指出Vue 使用的是一套自己的事件传递机制,如 @click 等事件是经过 Vue 封装的.所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符. 解决 而.native就是给组件绑定原生事件采用的方法 原文地址:https://www.cnblogs.co

Firefox下代码触发a标签的click事件无效

通过一次导出功能是让自己如何一步一步掉坑最后又是怎么爬起来的 在页面中通过document.createElement('a');创建一个a标签,然后给a标签的href属性赋url,通过代码触发a标签的click事件请求后台,在Chrome浏览器中请求正常,但是在Firefox中始终无效,debugger发现代码也走到了a.click()方法,但是就是没反应.代码如下: $.ajax({ url: Config.ApiUrl + "TZTZ/DowloadFile", type: &q

click事件的累加绑定,绑定一次点击事件,执行多次

最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求.完成后看效果,第一次点击没有问题.再一次点击后发现发送了两次请求,后面再点击发现请求的数量越来越多.这时我初步判断可能是元素有多个或是多次调用了方法,但找了一遍,发现只为一个元素绑定了事件,且只调用了一次.后来通过查资料才知道是点击事件被累加绑定了!那到底什么是累加绑定呢?什么时候会发生累加绑定?累加绑定后该如何解决呢?下面我就通过这三个问题来

for for in 给已有的li绑定click事件生成新的li也有click事件

想要给已有的li元素绑定一个click事件,点击生成新的li元素,并且新的li元素也要有click事件 //不能用for循环给每个li绑定click事件 因为这样的话 后面新生成的li就没有click事件 //即使用下面的获取dom元素方法 具有实时性 也不能给新生成的li绑定clcik事件   这两个方法是 实时的 HTMLCollection 不能直接forEach循环let ali1 = oul.getElementsByClassName('li') let ali2 = oul.get