BookBlock jQuery Plugin

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加载页面，然后把为我工作的页面。你可以在代码中使用相同的方法，只需调用$("#bb-bookblock").bookblock();