jQuery .slideToggle – Somehow being triggered multiple times

Question

Here's my code, I've tried to cut anything unnecessary from the JS: http://codepen.io/Zacaree/pen/EmZJXy

When I click one of the dropdown buttons (right side of page) triggering jQuery's .slideToggle, it opens a drawer but instead of remaining open, the drawer will trigger multiple times. The number of times triggered increases with each successive panel down the page.

The uppermost panel always works correctly.

function foo() {    
    $('.dashboard-right').children('h1').after(functionContainer).siblings('.function-container').removeClass('isPaused');

    $('.dropdown-button').click(function(){
        $(this).parents('.function-footer').siblings('.log-container').slideToggle('fast');
        $(this).children('.arrow').toggleClass('active');
    });
};

foo();
foo();
foo();
foo();
foo();

I'm a designer not a developer so please forgive me for posting what's probably a simple error on my part. I've fought and fought with this and can't seem to figure it out. Thank you so much to anyone who can explain to me what I'm doing wrong!

Thank you!

Answer 1

You are binding a click event every single time foo is called (Since the method is called 5 times, 5 click events are being bound to that element )

You need to just bind the click event only once.

Move the click binding event to outside of the foo method.

http://codepen.io/anon/pen/QvpLeg

function foo() {    
    $('.dashboard-right').children('h1')
                        .after(functionContainer)
                        .siblings('.function-container')
                        .removeClass('isPaused');
  };

$('body').on('click', '.dropdown-button' ,function() {
      $(this).parents('.function-footer')
             .siblings('.log-container')
             .slideToggle('fast');

      $(this).children('.arrow').toggleClass('active');
});

  foo();
  foo();
  foo();
  foo();
  foo();