jQuery:在通过AJAX拉入的页面上使用插件

时间:2011-09-08 09:23:02

标签: ajax jquery-plugins jquery

我正在构建一个简单的AJAX驱动的网站(因为受众,可以这样做),根据锚点等方式拉入页面。够简单。

但是,我要引入的其中一个页面应该有幻灯片显示。一旦呼叫成功并且页面出现,插件就无法运行。

我是否必须重新初始化我想在动态拉入的页面上使用的插件?

我现在无法显示任何代码,但从理论上讲,在动态页面上使用插件和重新启动JS代码最佳做法是什么?

我通常将所有脚本放在主索引页头部的一个jquery.scripts.js文件中。这些脚本本身需要在单独的页面上吗?

非常感谢! 迈克尔。

$('#logo a').click(function() {

    $.ajax({

        type: "POST",
        url: "./ajax/test.html",
        data: '', 
        dataType: "html",
        success: function(data){

            if(parseInt(data)!=0) {

                $('#cycle').html(data);

                $("#cycle").cycle({

                    fx:         'fade',
                    //easing:   'easeOutExpo',
                    speed:      3000, 
                    //timeout:  0, 
                    //next:     '#cycle-next', 
                    //prev:     '#cycle-prev'

                });

            }

        }

    });

    return false;

});

此代码执行调用,加载页面,但不重新启动插件。它什么都不做,没有错误。怪异。

2 个答案:

答案 0 :(得分:1)

您应该检索ajax页面,将其插入您的网站,完成后您可以初始化幻灯片。

基本上是这样的:

$.ajax({
    url: 'myurl',
    success: function (data) {
        $('#target').html(data);
        $('#target .slideshow').slideshow();
    }
});

<div id="#target">
    <div class="slideshow"></div>
</div>

答案 1 :(得分:1)

在运行$ .ajax命令之前,您没有说先前已经初始化了循环插件。如果是,那么你需要销毁循环幻灯片并重新初始化它。

success:function(data){
    if(parseInt(data)!=0) {
        $('#cycle').html(data);
        $('#cycle').cycle('destroy');
        $("#cycle").cycle({
            fx:'fade',
            //easing:'easeOutExpo',
            speed:3000,
            //timeout:0,
            //next:'#cycle-next',
            //prev:'#cycle-prev'
        });
    }
}