jquery Booklet中的动态内容问题(builtbywill)

时间:2011-03-28 17:00:02

标签: jquery ajax

我遇到的问题有几个问题。 首先,这只是在Firefox上工作。 Chrome甚至没有给我一个错误,也没有在'之后'给我提醒。 其次,这是主要问题,下面的代码在一定程度上起作用;它会在第一次调用'之后',但我认为我需要以某种方式刷新小册子才能意识到那里有新的div。

基本上我要问的是有人可以告诉我为什么它不能用于chrome并且有没有办法刷新小册子以便它意识到有两个新的div?

如果您需要更多代码,请告诉我。

提前致谢

jquery代码

$(function() {
    $('#booklet').booklet({
        height: 600,
        width: 960,
        manual: false,
        pageNumbers: false,
        pagePadding: 0,
        after: function(opts){
            var btn = $('#next-page').attr('className');
            //alert(btn);
            $.get('../../ajax/getAjaxBrand/'+btn, function(data) {
                alert(data);
                $('#next-page').replaceWith(data);
            });
        }
    });
});

返回的HTML

<div id="pager">    
    <div id="twotap-left">          
        <div class="twotap-image" style="background: url(http://localhost:8888/turner/catalogue/images/brand/single-page/) no-repeat;">         
            <img src="http://localhost:8888/turner/catalogue//images/fade-left.png" />      
        </div>      
        <div class="twotap-stuff">          
            <div class="twotap-title">
                <h1 id="twotaph1" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">HOLLYWOOD JUSTICE</h1>
            </div>          
            <div class="twotap-details">
                <h3 id="dps-det" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">6 x 30MINUTE EPISODES</h3>
            </div>          
            <div class="twotap-copy">
                <p>Hollywood Justice takes an in-depth look at Hollywood's famously challenged. Each episode delves into the lives, details and history of Hollywood celebrities who’ve had brushes with the law. The show profiles the stars who've gone from fame to infamy, and sometimes back again, with a focus on their antics both in and out of the courtroom.</p>           
            </div>          
            <div class="twotap-clogo">
                <img src=http://localhost:8888/turner/catalogue/images/logos/tru.png height='49px' />           
            </div>      
        </div>  
    </div>
</div>
<div id="pager">    
    <div id="two-tap-pf">       
        <img src="http://localhost:8888/turner/catalogue//images/fold-tra.png" />   
    </div>  
    <div id="twotap-right">     
        <div class="twotap-image" style="background: url(http://localhost:8888/turner/catalogue/images/brand/single-page/TRU-hot-purs.jpg) no-repeat;">         
            <div id="twotap-turner">
                <img src="<?php echo base_url();?>/images/turner-small-b.png" />
            </div>      
        </div>          
        <div class="twotap-stuff">              
            <div class="twotap-title">
                <h1 id="twotaph1" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">HOT PURSUIT</h1>
            </div>
            <div class="twotap-details">
                <h3 id="dps-det" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">.47 x 30 MINUTE EPISODES</h3>
            </div>              
            <div class="twotap-copy">
                <p>From high-speed chases to dangerous crashes, this adrenaline-pumping series shows the dangers our law enforcement professionals face every day.  Each episode focuses on a different situation – from raging drunks to lawless kids, from female fugitives to the worst escape attempts of all time, this series shows cops confronting all the most intense and hilarious challenges the country’s highways have to offer.  Featuring the most amazing footage ever captured, much of it taken from dashboard-mounted cameras in the police vehicles themselves, each half-hour episode is a wild ride.</p>             
            </div>
            <div class="twotap-clogo">
                <img src=http://localhost:8888/turner/catalogue/images/logos/tru.png height='49px' />
            </div>          
        </div>  
    </div>
</div>
<div id="next-page" class="house_of_clues">
</div>

1 个答案:

答案 0 :(得分:0)

这应该基于我正在使用的东西(工作正常的跨浏览器):

$('.book').booklet({
    autoCenter: true,
    covers: true,
    manual: false,
    pageNumbers: false,
    pagePadding: 0,
    width: 840,
    height: 570,
    closed: true,
    overlays: false,
    prev: $('.nav a.prev'),
    next: $('.nav a.next')
});

我的小册子似乎有用 - 没有尝试使用before()after()的回调,但我也想知道如何刷新小册子以允许添加动态AJAX内容......