jQuery 用click() 失效,不起作用,直接父级使用on事件委托不好使

您所在的位置:网站首页 js设置onclick没有反应 jQuery 用click() 失效,不起作用,直接父级使用on事件委托不好使

jQuery 用click() 失效,不起作用,直接父级使用on事件委托不好使

2023-10-04 21:35| 来源: 网络整理| 查看: 265

    本人在jQuery中还是个新人,然后今天写代码测试的时候发现了如题目所说的那种状况,写了一个click() 事件,

但是却没有点击后的效果或现象。之前写的代码如下:

$('.search-item').click(function(){ //someting 这里就不写里面具体代码了,反正就是功能效果。  });

然后我想了下会不会是没有点击事件,然后我在代码中增加了一行显示控制台的一条信息:

$('.search-item').click(function(){ console.log("hahah");     //someting });

发现控制台并没有 “hahah”出现,我就排除了我something中的代码出错,而是这点击事件根本没进去函数里面

执行代码,但是在排除了类名‘.search-itme’没有写错后,我就认为这也不是没有进入click函数里面,而是click函数

根本就不好使,或者浏览器不兼容了。随后我想了一下这个search-item的类是通过某一个点击事件用append()函数

而添加的元素,所以我想这应该click()函数对于这种情况不起作用,然后我把click()函数更改成 on()函数:

$('.search-item').on('click',function(){ console.log("hahah");       //someting }

尝试了一下,结果还是不行,并没有出来“hahah”,这时候苦恼的我纠结很久后又上网查了下jQuery on()函数的用法,和相关问题,然后在一个某博客园看到了某篇文章,里面写了一点:“on()方法,要绑定到父级或者 body”,这句话就是针对我这种情况的,search-item是通过点击事件新增的元素,然后再点击search-item元素的话就要把它通过父级来绑定on()方法:

$('.mid').on('click','.search-item',function(){     console.log("hahah");     //something });

这里 ‘mid’是search-itme 的父类,我把它绑定给mid父类,然后我再次打开控制台,点击, “hahah”出来了!终于把这

问题解决,也花了不少时间啊。。

后续补充:

有些情况下,即使是使用直接父级的on事件委托的方式(上面那种方法)也不能为子元素绑定事件的话,其实还用另外一种情况就是想要绑定事件的子元素的直接父级元素也是新添加进去的元素,这个时候,使用上面的直接父级元素的事件委托方式也是不好使的,jQuery里面on所绑定的事件必须是已经存在的元素,而后来新添加的元素经过实验也确实是不行,所以解决方法就可以呼之欲出了:

既然直接父级on事件委托不好使,那就不把事件绑定在直接父级上,最安心的方法就是绑定在body中,body是不会不存在的。

//以点击事件为例,其他事件绑定道理一样 $('body').on('click','.search-item',function(){ //something })

当然如果不喜欢用body来事件委托的话可以选一个已经存在的父级元素来事件委托。

//假设 .wrapper 是 .mid 和 .search 的直接或间接的父级 //选取 .mid 下的 .search-item $('.wrapper').on('click','.mid .search-item',function(){ //something })

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3