滑块内的jquery打开/关闭function – 第一次工作，但第二次，打开，然后关闭它

我有一个打开/关闭function的问题，它只是运行一个动画。

在这里看到我的小提琴http://jsfiddle.net/motocomdigital/X34XJ/7/

它正在播放，因为我在滑块动画中运行此function。 使用bx-slider。

---

直到第二个滑块旋转才会出现此问题。 这是你必须要做的小提琴才能让bug显示出来。

1. 打开小提琴，
2. 点击“打开面板”
3. 关闭面板，
4. 导航到下一张幻灯片
5. 重复上述相同的步骤（但在其中一个幻灯片上，保持面板打开并导航到下一侧）
6. 您将注意到当您返回滑动时，如果您尝试打开面板，它将打开，然后立即再次关闭。
7. 如果你再次重复这些步骤，你会注意到面板开始打开，关闭，然后再打开…… aaaahh很奇怪!!!!

---

这是我的代码（虽然查看它的小提琴会更好）

$('#slider1').bxSlider({ auto: false, speed: 800, // runs after new slide has loaded onAfterSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { var $fadeItems = $('a.openPanel, .panel, span'), // items that fade in $panel = $(currentSlideHtmlObject).find('.panel'); // current slide panel $fadeItems.removeAttr('style'); // this removes the inline style on all fadeItems, allowing css display: none; to take affect $(currentSlideHtmlObject).find($fadeItems).fadeIn(); // current slide fadeIn items fade in panelOpen = false; // panel state closed panelAction = function() { // panel slide function if (panelOpen === true) { panelOpen = false; $panel.animate({ left: '-300px' }); } else { panelOpen = true; $panel.animate({ left: '0px' }); } }; // panel slide open/close button $(currentSlideHtmlObject).find('a.openPanel').on('click', function(e) { e.preventDefault(); panelAction(); }); } }); ​ 

---

---

如果有人能帮我理解我哪里出错了，我会非常感激。

提前致谢。

Answer 1

在bxslider onAfterSlide回调中绑定click事件时，只需解除绑定使用off

 $(currentSlideHtmlObject).find('a.openPanel').off('click').on('click', function(e) { e.preventDefault(); panelAction(); }); 

但是你的代码在chrome上充满了bug。

请注意，您不应该在bxslider onAfterSlide回调函数中绑定事件。

见http://jsfiddle.net/X34XJ/8/