How do I call an onChange function for foundation Orbit Slider?

Question

I have a foundation orbit slider. I am trying to call a function when the orbit image changes. In the jquery below the ready.fndtn.orbit works. However the after-slide-change will not fire. Foundations docs offer no help for this issue.Any suggestions or help is very welcome

<ul id="featured1" class="no-bullet example-orbit" data-orbit data-options="animation:fade;
    timer: false;
    slide_number: false;
      pause_on_hover:false;
      animation_speed:800;
      navigation_arrows:true;
      bullets:false;">

    <li id="slideImg1">
        <a href="training/hygiene.cfm"><img src="img/slide5.png" alt="stuff here"></a>
    </li>

    <li id="slideImg2">
        <a href=""><img src="img/slide6.png" alt="See a Demo of the CIS-CAT Assesment Tool" ></a>
    </li>
    <li id="slideImg3">
        <a href=""><img src="img/slide7.png" alt="The Critical SecurityControls are now available in Japanese"></a>
    </li>
</ul>


<script>
    $(document).on('ready.fndtn.orbit', function(e) {
            captionFunction();
        });
        $(document).on('after-slide-change.fndtn.orbit', function(e) {
            captionFunction();
        });
</script>

Answer 1

From what I see in the Foundation docs, it looks like you'll want to select the ul element to add the event handler, in your case: $("#featured1").on("after-slide-change.fndtn.orbit").... rather than selecting $(document) . I tried it on a quick sample and the events fired just fine.

See http://foundation.zurb.com/docs/components/orbit.html and search for 'after-slide-change.fndtn.orbit' to see the example I was looking at.

Update

I've set up a jsFiddle that demonstrates this working (you'll have to scroll to the bottom in the javascript panel to see the pertinent stuff). It seems the key is to surround the javascript with $(document).ready(function(){ and }); :

$(document).ready(function() {
    // this should come before initializing orbit or it won't fire
    $("#featured1").on('ready.fndtn.orbit', function(e) {
        console.log('orbit is ready');
    });

    $(document).foundation({
       orbit: {
            animation: 'fade',
            timer: false,
            slide_number: false,
            pause_on_hover: false,
            animation_speed: 800,
            navigation_arrows: true,
            bullets: false
        }
    });

    $("#featured1").on('after-slide-change.fndtn.orbit', function(e) {
        console.log('getting after slide change event!');
    });
});

Note that I had to add the call to $(document).foundation and I had to set the timer to true because I couldn't see the navigation arrows to change slides manually. Lastly, I don't have your images so it's pretty ugly, but I think it demonstrates how to get things working well enough even so ;)

Anyway, when you visit that link, open your browser's javascript console to see the output "getting after slide change event!".