javascript - SmoothState onAfter 回调

Question

我的网站在大多数页面上都有类似 slider 的元素。我正在尝试实现 SmoothState JS，但遇到了第二页中断的问题。通过文档我知道我可能需要添加 onAfter 回调，但我想知道在哪里以及如何应用它。显然，如果不熟悉 Ajax，这可能会很棘手。

Here is the documentation on the issue.

这是我用来触发脚本的代码:

$(function(){
  'use strict';
  var $page = $('#uber'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        onStart: {
          duration: 250, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

有人对我如何添加 onAfter 回调有任何想法吗？

Answer 1

我刚刚开始尝试 smoothState，但这是最先对我起作用的。

$(document).ready(function(){
  prep(); 
});

$('#main').smoothState({
  onAfter: function() {
    prep();
  }
});


function prep(){

      $('#loadBtn').click(function () { 

          $( '#remote1' ).load( 'external.html #myExternalDiv', function( response, status, xhr ) {
            if ( status == 'error' ) {
              var msg = 'Sorry but there was an error: ';
              $( '#error' ).html( msg + xhr.status + ' ' + xhr.statusText );
            }
            $('#remote1').slideToggle();
          });

      }); 

} // prep

因此，我将通常会进入 $(document).ready 部分的内容放入 prep() 函数中。然后我为 doc init 和 onAfter 调用它。