Question

我正在构建一个简单的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;

});

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

Answer 1

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

基本上是这样的：

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

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

Answer 2

在运行$ .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'
        });
    }
}

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

2 个答案: