附加多个点击事件而不必重复自己

Question

这是小提琴 。 忽略样式，那并不重要。

基本上，我需要打开Fancybox并显示两个链接，但是我只想要一个图库图像。 我很容易地发现了这一点。 单击缩略图时，它将触发li锚点。
为了使画廊分开，我为每个ol设置了唯一的类。

我遇到的问题是我会重复自己。 我试图做一个循环（注释掉），但是逻辑超出了我的理解范围。

附加新的点击处理程序（我需要再添加8个）而不用当前的方式重复自己的最佳方法是什么？ 我也尝试了一个带有几个参数的函数，但是使用e.preventDefault()遇到了麻烦。

我非常感谢任何指导，谢谢！

Answer 1

这看起来是使用jQuery的on()方法的一个很好的用例。 on()是一种方法，可让您在外部容器上建立处理程序，该处理程序可以侦听其子级的单击事件。 因此，例如：如果您在列表中指定了.js-listen类，则可以像这样调用on() ：

$('.js-listen').on('click', 'other-selector', function(e){
   // function logic with either $(this) or e.target goes here
}

此块实际上将查找具有.js-listen所有元素，然后单击具有.js-listen类的元素中的某些内容时，该事件将在DOM中冒泡，并且将根据该元素来处理该事件。点击。 我具有'other-selector'的第二个参数可以是类名称，元素或ID。 因此，您基本上可以在其中放置类似img ，并且如果单击的子元素是<img>标记，它将触发该事件。

这样可以防止您附加一百万次处理程序，并且on()的好处之一是，如果使用处理程序将元素动态添加到容器中，则不必担心将处理程序附加到那些元素上，因为再次，它们冒泡了！

希望这可以帮助！