JavaScript onclick 函数意外执行两次

Question

有这么一个购物清单小程序。

大神可以打开Codepen查看我的代码。[Codepen]
(https://codepen.io/vincentyolo/pen/LYNEodr?editors=1112
)

我想添加一个X的按钮，当用户点击x就删除那一项。 我的删除的函数是通过给所有的X按钮一个。
给有

".del_btn"

的类名（class）的X按钮添加 用splice方法删除用户选中的那一项内容 的函数。 (函数在45行开始)

但是当我只想要删除第二项麦克风，点击第二项的X的时候， 第2，3，4项全部都给删除了。

当我打开console检查时发现splice 方法执行了3次。 可是我只想它执行一次，这里不知道有什么bug。 我查了event delegation试了stopPropagation()也无果。 小弟新人真的不知道该查什么关键字了。麻烦大佬们看看。

Answer 1

问题出在你的 $('.del_btn') 的事件绑定方式, 这个选择器是选择所有的 class 包含了 .del_btn 的按钮的, 而你又是在 for 循环中绑定的, 因此造成了第一个按钮被绑定了四次, 第二个按钮被绑定了三次, 以此类推.

你要做的是把 $('.del_btn').click(...) 移出 for 循环即可

Answer 2

谢谢vimac的解答。
使用Firefox浏览器的dev tools 可以看到我这里的确是因为for loop 在一个按钮上绑定了多次删除的事件导致了这次的bug。
如果后面有遇到相同问题的朋友可以试试firefox的dev tools查看绑定的事件数量。