通过触发该页面中的功能将Jquery Mobile重定向到新页面？

Question

我正在使用JQuery mobile构建移动应用程序，在首页中将其称为第1页，其中包含指向不同页面的导航按钮，在其中将它们称为第2页

以下是第1页

$(document).ready(function () {
    $("body").pagecontainer({
        defaults: true
    });

    $("#page-2").click(function () {
        $("body").pagecontainer("change", "page-2.html", {
            reload: true
        });
        $(document).ready(function () {
            function_in_page - 2.init();
        });
    });

第2页具有以下内容

var function_in_page = {
    init: function () {
        alert('first-1');
        $("#button-1").click(function () {
            alert('second-1');
        });
    });

那么发生了什么事，我收到“ First-1”警报，但是当我单击ID为（button-1）的按钮时，没有任何反应，有任何建议吗？

Answer 1

首先， .pagecontainer()会使用默认设置自动初始化 ，因此您无需对其进行初始化。

其次，不要使用.ready()在jQuery Mobile中添加侦听器，而是坚持使用pagecontainer事件 。 每当jQM框架加载页面和/或通过Ajax导航到该页面时，都会触发后面的事件，尤其是在Single Page Model中 。 与.ready()不同， .ready()仅在初始化框架时才触发一次。

有许多方法可以使用pagecontainer事件在单页模型中使用jQuery Mobile控制Webapp。 最安全的方法是给每个页面一个唯一的ID ，以确定哪个事件在哪个页面上被忽略。 另一个要注意的是，您需要知道，无论您有多少个外部页面 ，DOM中将只保留两个页面。 主页和您从主页导航到的另一个外部页面 。

要添加侦听器，请使用pagecreate事件，它等效于.ready()并可以委托给特定页面。

<div data-role="page" id="home">

$(document).on("pagecreate", "#home", function () {
   $(".selector").on("click", function () {
      /* run code */
   });
});

该事件每页将触发一次，但是请注意，它将在通过Ajax加载的任何外部页面上再次触发。 因此，应使用.off()在添加新绑定之前删除先前的绑定。 否则，每当您通过Ajax加载外部页面时，附加的侦听器都会多个。

<div data-role="page" id="second">

$(document).on("pagecreate", "#second", function () {
   $(".selector").off("click").on("click", function () {
      /* run code */
   });
});

将所有自定义JS代码保留在所有页面的head ，尽管该代码将在首次运行时加载一次。 jQuery Mobile加载每个外部页面的 首页div ，而该div之外的任何内容都将被忽略。

---

回到上面的代码，这是它的外观。 为每个页面指定一个ID，然后使用它们添加click侦听器。 假设home是主页， second是page-2.html。

$(document).on("pagecreate", "#home", function () {
   $("#btn").on("click", function () {
      $.mobile.pageContainer.pagecontainer("change", "page-2.html");
   });
});

现在，可见page-2.html。 向button-1添加一个click侦听button-1 。

$(document).on("pagecreate", "#second", function () {
   $("#button-1").off("click").on("click", function () {
      alert("page 2");
   });
});

演示版

阅读有关pagecontainer事件的更多信息。

Answer 2

如果第2页中的脚本执行得较早，则该按钮可能尚不存在。 尝试将其包装在document.ready

$(document).ready(function(){
   var function_in_page={init:function(){
   alert('first-1');
    $("#button-1").click(function(){
    alert('second-1');
    });});
});