Search code examples
javascriptjqueryhtmlgumby-framework

Gumby Framework - JQuery firing onclick event twice

I'm creating a new site with the Gumby CSS Framework: http://gumbyframework.com

When I use their JQuery to check for button click and wrap inside their Gumby JS ready function

Gumby.ready(function() {});

The event is fired twice. I've spent a while trying to debug and cant work it out.

CodePen demo here: http://codepen.io/ptimson/pen/LseFk?editors=101

HTML

<div id="btn"><a href="#">Button</a></div>

JS

// Gumby is ready to go
Gumby.ready(function() {

  $('#btn').on(Gumby.click, function(e) {
      e.preventDefault();
      console.log('Clicked');
  });
});

Note: Removing Gumby.ready works but I need to keep that function so that I know the Gumby functions are available right?

Solution

  • You're right, removing Gumby.ready is ok. According to the Documentation, Gumby will automatically initialize by default. For manual initialization you have to load the script with a flag:

    <script gumby-init="false" src="js/libs/gumby.js"></script>

    And than you can call Gumby.init().ready();

    Here's the Documentation.

    Best.