具体是这样的：
页面中本来就存在一个 ul 列表，然后 为 ul 中的 每一个 li 元素 用 on()方法 绑定了点击事件。 此外，页面中还有一个新增按钮，点击可以在页面中 追加 一个 ul 列表 。 追加之后，也为 新 ul 列表 中的 每一个 li 元素 绑定了点击事件。同样，用的也是 on() 方法。问题来了：
在点击 新增 ul 列表之前，为 ul 中的 li 元素 绑定的点击事件还可以正常使用；
在 新增 ul 列表之后，再次点击之前 ul 中的 li 元素 ，你会发现：点击之后没反应。
通过调试代码才发现，原来是因为点击事件执行了两次，导致样式增加后又被移除。所以看起来就好像 点击事件失效了一样。
功能问题的动图演示如下所示：
出现问题的原因：
那么，为什么会出现这种问题呢？ 刚开始我也很好奇，感觉 可能是因为自己绑定的方式有问题，所以只好自己写个 demo 自行测试一下。
我要评论
<script>
$("ul").on("click","li",function(){
$(this).toggleclass('item');
})
</script>
点击 新增按钮 之后，页面中又追加了一个 新的 ul 列表。【如下图所示】
我平时遇到的比较多的情况是：在追加时就为该元素绑定了点击事件。具体如下代码所示：
//点击在 body 里 追加一个 ul 列表
$("button").on("click",function(){
$("body").append("
于是，为简单方便，我就直接这样写了。具体如下代码所示：
//点击在 body 里 追加一个 ul 列表
$("button").on("click",function(){
$("body").append("
-
为什么会执行两次呢？
答案马上揭晓…
在页面加载完成之后，就为页面上 已经存在的 ul 列表中的 每一个 li 元素 添加了点击事件。没错吧~
此时是没有任何问题的。然后，我们 点击 “新增” 按钮，页面上就会追加 一个 新的 ul 列表。
追加完成之后呢，又会给 新增 的 ul 列表 中的 每一个 li 元素 添加点击事件。
注意：
仔细看，此时为 每一个 li 元素 添加点击事件的 父元素 ul ，居然有两个。
我的本意是 只给新增的 ul 列表 中的每一个 li 元素 添加点击事件，没想到点击按钮之后，又为 原有的 ul 列表 中的 每一个 li 元素 添加了一次点击事件。
这么算来，原有的 ul 列表 中的 每一个 li 元素 就被添加了 两次 点击事件，所以每点一次就会出现执行两次的现象。
接下来，我们点击 原有的 ul 列表中的某一个 li 元素 试试，看一下效果。
执行下一步，完成点击事件
然后你会惊奇的发现：第 3个 li 元素的样式消失了…
现在去尝试点击一下，看一看 新旧 li 元素在被点击之后有什么不同之处。
分析：
没错吧，新增的 li元素点击事件不受影响，而原有的 li元素 就没有那么幸运了。 因为原有的 li元素被添加了两次点击事件，所以就会点一次执行两次，样式添加之后又被移除了。整个过程就相当于没有点击，最后看起来就好像 “点击事件失效了” 一样。
$("ul").off("click","li").on("click","li",function(){
$(this).toggleclass('item');
});
现在我终于明白了：为什么在绑定事件之前还需要专门解绑一次事件。以前虽然经常看到这种操作，但是不明白这么做的原因，也不知道什么情况下需要先解绑再绑定事件。
一开始我百度了一下，还以为是因为冒泡的原因。当时百度的关键词是：子元素的点击事件触发两次
搜到的结果是这样的，于是就点开看了下第一个搜索结果，看看有没有什么帮助：
参考资料：js(jquery)的on绑定点击事件执行两次的解决办法
至此，问题就已经完美解决了。
演示 demo 的完整代码，如下所示：
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
网友评论