简体   繁体   English

Foundation4:Joyride在页面加载时触发postRideCallback

[英]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. 我正在与CakePhp2.4一起使用Foundation4,并且到目前为止,这还没有问题。 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). 不管我做什么,页面完成加载时都会调用joyRide的postRide回调(并且在Joyride完成时不会再次调用)。

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. 另外,由于我的目标只是在Joyride结束后立即触发initialize() (一个自定义函数),因此,我尝试将事件侦听器绑定到.joyride-close-tip类,甚至在Joyride中绑定自定义元素ID。窗格,所有这些都在页面加载时被调用。

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, 1)我在noConflict模式下使用jQuery,因为这全部由CakePhp2.4控制,因此,$ j前缀而不是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). 2)我无法在此应用程序中使用zepto(尽管我不知道为什么;但是,如果加载它,则没有任何效果)。

My HTML: 我的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: 我的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. 供大家参考,问题是我将一个实际函数传递给postRideCallBack ,而不是一个函数定义,即。 simply wrapping initialize() in function() { initialize(); } 只需将initialize()包装在function() { initialize(); } function() { initialize(); } solved the problem. function() { initialize(); }解决了这个问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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