Question

在我的JQuery Mobile项目中，我在主页上有一个图像滑块。通过此页面进入时，此工作正常。但是，如果我离开，然后返回页面，它就不起作用。

每个JQM页面都有1个html文件（例如4页等于4个html文件）。

下面给出的代码js通过页面标题中的引用加载到包含它的js文件中。

$(function () {
    //Global variable that stores advertising banners.
    var featured = new Array();

    //Adds information about the new banners.
    featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]);
    featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]);
    featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]);

    var featured_element = document.getElementById("slider");

    //Prints a new link with image in advertising box.
    $.each(featured, function (i, advert) {
        featured_element.innerHTML += "<img src=\"" + advert[1] + "\" data-plugin-slide-caption=\"<a href='" + advert[0] + "'>" + advert[2] + "<\/a>\"/>";
    });

    $("#slider").excoloSlider({
        mouseNav: false,
        interval: 3500, // = 3.5 seconds
        playReverse: true
    });
});

我如何调整它以便每次加载此给定页面时都会触发它？

Answer 1

尝试将您的图库代码放入pagecreate blinded function。

jQuery( ".selector" ).on( "pagecreate", function( event ) {
  //Gallery code here
})

此处.selector是您放置jQuery-Mobile页面的页面。

Answer 2

<强> CORRECTION 我实际上不得不调用正文中的js文件来使其工作，而不会导致第2页出现问题。

在对@Omar过去的答案进行了一些争论之后，并试图对各种JQM事件进行了试验，我想出了以下内容。

我在js文件中创建了一个脚本，并在default.html的头部引用了这个脚本。这将变成PhoneGap应用程序，所以我知道这将是第一页。

在JS文件中，我已将代码更新为：

$(document).one("pageshow", function () {
alert("LOADED SLIDER CODE");
//Global variable that stores advertising banners.
var featured = new Array();

  //Adds information about the new banners.
  featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]);
  featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]);
  featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]);
  /*
  featured.push(["", "", ""]);
  featured.push(["", "", ""]);
  featured.push(["", "", ""]);
  featured.push(["", "", ""]);
  featured.push(["", "", ""]);
  featured.push(["", "", ""]);
  featured.push(["", "", ""]);
  */


  var featured_element = document.getElementById("slider");

  //Prints a new link with image in advertising box.
  $.each(featured, function(i, advert) {
        featured_element.innerHTML += "<img src=\""+advert[1]+"\" data-plugin-slide-caption=\"<a href='"+advert[0]+"'>"+advert[2]+"<\/a>\"/>";
  });

    $("#slider").excoloSlider({
        mouseNav: false,
        interval: 3500, // = 3.5 seconds
        playReverse: true
    });
});

现在只要页面小部件等已加载到DOM中，就会调用js，并且在首次显示“页面”时显示必要的内容。

如何在每次加载页面时运行代码

2 个答案: