简体   繁体   中英

Foundation4: Joyride firing postRideCallback on page load

I'm using Foundation4 in tandem with CakePhp2.4 and, until now, have had no problem with this. No matter what I do, joyRide's postRide callback is being called when the page finishes loading (and won't call again when Joyride has completed).

Also, since my goal is just to fire initialize() (a custom function) as soon as Joyride ends, as an alternative I've tried binding event listeners to the .joyride-close-tip class and even custom element id's within the joyride pane, all of which are also being called at page load.

I've tried so many different variations on this that I can't adequately post everything I've tried, but here's my current code:

Notes:
1) I'm using jQuery in noConflict mode because this all being controlled by CakePhp2.4, hence, the $j prefix instead of the usual $ for jquery,
2) I am not able to use zepto in this app (though I don't know why; nothing works if I load it, however).

My HTML:

<ol class="joyride-list" data-joyride>
    <li data-id="module-name">
        <h4>Welcome!</h4>
        <p>You're about to start the module. But first, we'll make sure you understand the interface.</p>
    </li>
                   <!--- several more <li> pairs ---->
    <li data-button="begin">
        <h4>All Set?</h4>
        <p>Click "Begin" to get started on this module!</p>
    </li>
</ol>

My JS:

<script type="text/javascript" src="appname/js/vendor/jquery.js"></script>
<script type="text/javascript" src="appname/js/foundation.min.js"></script>
<script type="text/javascript" src="appname/js/app.js"></script> <!-- custom js functions that reply on jquery and have no collisions with Foundation -->
<script> 
    $j(document).foundation('joyride',
                            'start',
                            { postRideCallback: initialize() }
    );
    // have also tried:
    // $j(document).foundation().foundation('joyride','start',{postRideCallback: initialize()});
</script>

For everyone's reference, the problem was that I was handing an actual function to postRideCallBack , instead of an a function definition—ie. simply wrapping initialize() in function() { initialize(); } function() { initialize(); } solved the problem.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM