Question

我正在使用JQuery移动应用程序构建移动应用程序，并在首页中调用它第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');
        });
    });

所以发生了什么，我得到了警告＆＃34; First-1＆＃34;但当我点击带有ID的按钮（按钮-1）时，没有任何反应，任何建议？

Answer 1

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

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

使用 pagecontainer事件在单页模型中使用jQuery Mobile控制webapp有很多方法。最安全的方法是为每个页面提供唯一ID ，以确定在哪个页面上省略了哪个事件。另外需要注意的是，无论你拥有多少个外部页面，只需要两个页面保留在DOM中;您从主页导航到的主页和另一个外部网页。

要添加侦听器，请使用.ready()事件，它等同于<div data-role="page" id="home">，并且可以委派给特定页面。

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

.off()

每个页面会触发一次该事件，但请注意，它将在通过Ajax加载的任何外部页面上再次触发。因此，您应该在添加新绑定之前使用<div data-role="page" id="second">删除以前的绑定。否则，只要您通过Ajax加载外部页面，附加的侦听器就会多次使用。

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

head

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

回到上面的代码，这里应该是这样的。为每个页面提供一个ID，并使用它们添加home个侦听器。我们假设second是主页，$(document).on("pagecreate", "#home", function () { $("#btn").on("click", function () { $.mobile.pageContainer.pagecontainer("change", "page-2.html"); }); });是page-2.html。

click

现在，页面2.html可见。向button-1添加$(document).on("pagecreate", "#second", function () { $("#button-1").off("click").on("click", function () { alert("page 2"); }); });监听器。

{{1}}

<强> Demo

通过触发此页面中的功能，将Jquery mobile重定向到新页面？

2 个答案: