将 Jquery 移动重定向到新页面，并触发此页面中的函数

Redirect Jquery mobile to new page with triggering of functions in this page?

本文关键字：函数 移动 Jquery 重定向 新页面      更新时间：2023-09-26

我正在使用JQuery移动构建一个移动应用程序，在首页中我们称之为page-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 的按钮(按钮-1(时没有任何反应，有什么建议吗？

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

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

有许多方法可以使用页面容器事件在单页模型中使用 jQuery Mobile 来控制您的 Web 应用程序。最安全的方法是为每个页面提供一个唯一的 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是第 2 页.html。

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

现在，第 2 页.html可见。将click侦听器添加到button-1。

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

演示

阅读有关页面容器事件的更多信息。

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

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