Question

I am having problem with a open/close function which simply runs an animation.

See my fiddle here http://jsfiddle.net/motocomdigital/X34XJ/7/

It is playing up because I am running this function inside an slider animation. Using bx-slider.

---

The problem does not occur until the second slider rotation. This is what you have to do in the fiddle to get the bug to show.

1. Open the fiddle,
2. Click the ‘Open Panel’
3. Close the panel,
4. Navigate to the next slide
5. Repeat the same steps above (but on one of the slides, leave the panel open and navigate to the next side)
6. You will notice when you get back to slide one, if you try to open the panel, it will open, then immediately close again.
7. If you repeat these steps again, you will notice the panel starts to open, close, then open again… aaaahh weird!!!!

---

This is my code (though viewing it the fiddle will be better)

$('#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();

        });

    }

});
​

---

---

If anyone could help me understand where I’m going wrong, I would be so grateful.

Thanks in advance.

Answer 1

Just unbind using off as you are binding click event in bxslider onAfterSlide callback

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

            e.preventDefault();
            panelAction();

        });

But your code is full of bugs for me on chrome.

Note that you shouldn’t bind events in bxslider onAfterSlide callback functions.

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