Question

我有两个页面正在使用touchSlider（jquery库）。两者都在单独的页面中工作。但是当我想将它们动态加载到index.html时，库无法工作。这是我的html代码和js代码。非常感谢你！

index.js

    $("#div1").on("click", function() {
            $.getScript( "js/jquery.touchSlider.min.js", function() {
                $("#main-content").html("");
                $("#main-content").load("page2.html");
                $('#gallery2').touchSlider({
                    animation: 'js',
                    mode: 'shift',
                    offset: 'auto'
                });                     
    });

$("#div2").on("click", function() {
        $.getScript( "js/jquery.touchSlider.min.js", function() {
            $("#main-content").html("");
            $("#main-content").load("page1.html");
            $('#gallery1').touchSlider({
                animation: 'js',
                mode: 'shift',
                offset: 'auto'
            });                         

    });

index.html

<div>
  <div id="div1"></div>
  <div id="div2"></div>
  <div class="main-content">
  </div>
</div>

page1.html

<div class="page1">
  <div id="gallery1">slider1</div>
</div>

page2.html

<div class="page2">
  <div id="gallery2">slider2</div>
</div>

Answer 1

这是因为代码在插件成功加载之前执行。因此，您必须在.load()方法中使用回调函数：

已编辑：为防止重新加载插件，我创建了第三个功能来执行功能。这个逻辑可以改进，但我认为你可以这样做：

$("#div1").on("click", function() {
    if( $.fn.touchSlider === undefined ){
        $.getScript( "js/jquery.touchSlider.min.js", function() {
            loadSlider(2, 2);
        });           
    }
    else {
        loadSlider(2, 2);
    }
});

$("#div2").on("click", function() {
    if( $.fn.touchSlider === undefined ){
        $.getScript( "js/jquery.touchSlider.min.js", function() {
            loadSlider(1, 1);
        });           
    }
    else {
        loadSlider(1, 1);
    }
});

function loadSlider(page_number, gallery_number){
    $("#main-content").html("").load("page" + page_number + ".html", function(){
        $('#gallery' + gallery_number).touchSlider({
            animation: 'js',
            mode: 'shift',
            offset: 'auto'
        });                         
    });
}

检查jQuery .load https://youtu.be/RqrAGiP7Rh4。

动态加载页面时touchSlider不起作用

1 个答案: