Menu icon Foundation
Tabs change event

FYI, its taken me hours to figure this out. Was trying to add an event handler to the tab change event. According to the Foundation 6 docs the event triggered is change.zf.Tabs
(http://foundation.zurb.com/sites/docs/tabs.html#javascript-reference)
However after hours of nothing happening and trying to attach this to multiple elements, I discovered that the actual event being triggered is change.zf.tabs (notice the lowercase t in tabs)

I though I would post this here or anyone else having the same issue. And maybe so the documentation could be corrected?

Funnily, the foundation.tabs.js file in the bower_components/foundation-sites/js folder has the uppercase version in it. Only after several hours did I think to check the actual dist/foundation.js file and notice the discrepancy.

Foundationsitestabschange.zf.tabseventtrigger

FYI, its taken me hours to figure this out. Was trying to add an event handler to the tab change event. According to the Foundation 6 docs the event triggered is change.zf.Tabs
(http://foundation.zurb.com/sites/docs/tabs.html#javascript-reference)
However after hours of nothing happening and trying to attach this to multiple elements, I discovered that the actual event being triggered is change.zf.tabs (notice the lowercase t in tabs)

I though I would post this here or anyone else having the same issue. And maybe so the documentation could be corrected?

Funnily, the foundation.tabs.js file in the bower_components/foundation-sites/js folder has the uppercase version in it. Only after several hours did I think to check the actual dist/foundation.js file and notice the discrepancy.

italo maia about 4 years ago

Just had the same issue with "moved.zf.Slider" from slider, which should actually listen to moved.zf.slider (lowercase). So, the correct code would be:

$("query").on('moved.zf.slider', function(event){ /* do stuff */ }) 

A lot of time was spent until I figured it out. Reading this post earlier would have saved me a lot of time sadface.