解决jQuery无法添加监听

在最近的项目开发中,用Webpack做了一套脚手架,用jQuery作为主要工具库,一顿操作猛如虎,一看代码2w5。😅今天在这里记一下无法给Dom绑定监听的小问题。

谈起jQuery绑定事件,这里以最常用的点击事件为例,常见的两种写法有:

1
2
3
4
5
6
7
8
9
10
method one:

$('.selector').on('click',()=>{
//do something here
})

method two:
$('.selector').click(()=>{
//do something here
})

这两种写法大多数旁友都非常熟悉,平时用起来一点问题也没有,但在我的项目中,却愣是绑定不起来,经过一番查找,原因出在我要绑定事件的Dom是循环后append的,所以,点击事件就失效了,查了下jQuery的API:

1
on(eve,[sel],[data],fn)

发现on存在可选的第二个selector参数,官方说明:「一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。」OK,那么要解决这个问题,必须在append html element之后,去on要绑定事件元素的父元素。写成表达式即为:

1
$('.parentSelector').on('click','.childSelector',()=>{})

好了,事情解决了,可以开启开心星期四了。🤪