BookBlock jQuery插件

Question

我正在使用BookBlock插件。它运行得很好，但我似乎无法使用插件来翻转加载了AJAX的新页面。

有人知道如何重新初始化插件，以便“看到”新页面吗？

我的BookBlock代码：

var Page = (function() {

    var config = {
            $bookBlock : $( "#bb-bookblock" ),
            $navNext : $( "#bb-nav-next" ),
            $navPrev : $( "#bb-nav-prev" ),
            $navFirst : $( "#bb-nav-first" ),
            $navLast : $( "#bb-nav-last" )
        },
        init = function() {
            config.$bookBlock.bookblock( {
                speed : 500,
                shadowSides : 0.8,
                shadowFlip : 0.4,
                onEndFlip : function(prev, next, isLimit) {
                    $nav.removeClass('bb-current');
                    $dot = $('.navigation_dots').find('div.dot:eq(' + next + ')');
                    $dot.addClass('bb-current');

                    if (isLimit) {
                        console.log('load new content here');
                        $("<div>").load("line-up.html #bb-bookblock", function () {
                            $("#bb-bookblock").append($(this).find("#bb-bookblock").html());
                        });
                        initEvents();   // <--- This not working
                    }
                }
            } );
            $nav = config.$bookBlock.prev('div.navigation_dots').children('div.dot');
            initEvents();
        },
        initEvents = function() {

            var $slides = config.$bookBlock.children();

            // add navigation events
            config.$navNext.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "next" );
                return false;
            } );

            // add navigation events
            $nav.each(function (i) {
                $(this).on('click touchstart', function (event) {
                    var $dot = $(this);
                    $nav.removeClass('bb-current');
                    $dot.addClass('bb-current');
                    config.$bookBlock.bookblock('jump', i + 1);
                    return false;
                });
            });

            config.$navPrev.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "prev" );
                return false;
            } );

            config.$navFirst.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "first" );
                return false;
            } );

            config.$navLast.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "last" );
                return false;
            } );

            // add swipe events
            $slides.on( {
                "swipeleft" : function( event ) {
                    config.$bookBlock.bookblock( "next" );
                    return false;
                },
                "swiperight" : function( event ) {
                    config.$bookBlock.bookblock( "prev" );
                    return false;
                }
            } );

            // add keyboard events
            $( document ).keydown( function(e) {
                var keyCode = e.keyCode || e.which,
                    arrow = {
                        left : 37,
                        up : 38,
                        right : 39,
                        down : 40
                    };

                switch (keyCode) {
                    case arrow.left:
                        config.$bookBlock.bookblock( "prev" );
                        break;
                    case arrow.right:
                        config.$bookBlock.bookblock( "next" );
                        break;
                }
            } );
        };

    return { init : init };

})();

Page.init();

提前致谢。

Answer 1

我遇到了同样的问题，以下内容对我有用：

    jQuery(document).ready(function($){
    $("#bb-bookblock").bookblock(); //To initialize
    $("#bb-nav-next").on("click",function(e){
        e.preventDefault();
        $.get("long.php",function(data){    //load whatever you want to first
            $("#bb-bookblock").append("<div class='bb-item'>"+data+"</div>").bookblock();   //append a .bb-item div in the #bb-bookblock div and re initialize
            $("#bb-bookblock").bookblock('next');   //finally calling the next()
        });
    });
});

我同意这种方法不同，但我想目标是通过AJAX加载页面，然后翻开适合我的页面。 您可以在代码中使用相同的内容，只需调用$（＆＃34; #bb-bookblock＆＃34;）。bookblock（）;无论何时你想加载新页面。