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

    本人在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
})

 

  • 34
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值