如何在 JQuery Mobile for iOS 中发生页面更改时添加一些操作

Posted 2023-05-09

【中文标题】如何在 JQuery Mobile for iOS 中发生页面更改时添加一些操作

【英文标题】：How to add some actions when page change happened in JQuery Mobile for iOS

【发布时间】：2017-03-11 00:22:31

【问题描述】：

我创建了一个启用后退按钮的表单页面。现在我的意图是在单击后退按钮或出现页面时重置表单中的所有输入数据。

我的第一个目标是在触发后退按钮时添加操作。

我写了下面的代码来添加返回按钮。 (data-add-back-btn="true")

<div id="xxxxx" data-role="page" data-theme="d" data-add-back-btn="true">

现在我想在单击后退按钮时执行一些操作。我尝试添加事件侦听器，但没有成功。

document.addEventListener("backbutton", function(e)
    //written some codes here but it's not triggering when back button clicked                      
, false);

我的第二次尝试是在下面的方法中添加这些代码。

$( ":jqmData(role='page')" ).live( "pagebeforeshow", function(event) 
    // Here I wrote code but no works                                                    
);

和

$( ":jqmData(role='page')" ).live( "pageshow", function(event) 
 // Here I wrote code but no works    
);

请建议如何做到这一点。请理解我无法更改实施。我必须用当前的场景和代码来修复它。我无法更改“后退按钮”的实现。

【问题讨论】：

您遇到的错误是什么？

页面ID在哪里？您要为哪个页面附加 pagebeforeshow/pageshow 事件？

但我必须实现 23 页。如果我指定页面 ID，那么我必须写 23 页。我还将所有页面都写在一个 html 文件中，即 index.html

【参考方案1】：

const backButton = document.querySelector(".backButton");

backButton.addEventListener("click",function()
  
  console.log("Back button has been click");
  
);

*
  padding: 0;
  margin: 0em;


.navbar
  width: 100vw;
  height: 3em;
  background: blue;
  color: #FFF;

<div class="navbar">
  <div class="backButton">Back</div>
</div>

首先我不知道 JS 有一个名为 backbutton 的事件，但我确定 JS 有一个名为 click 的事件

【讨论】：

您已经创建了自己的自定义按钮类。我现在做不到。然后我需要在我的应用程序中做出巨大的改变。我必须使用现有代码 来添加按钮。后退按钮事件在 JS 中不存在，但在 jquery mobile 中。

【参考方案2】：

我的第一个建议是不要在你的 Cordova 应用程序中使用很多页面，只使用一个页面，如 index.html，然后将所有页面放入其中并使用显示和隐藏功能来查看你想要显示的页面使用 div 标签。下面的例子。

    <div id="registerPage" style="display:none"> </div>

如果您想显示该页面，请尝试

$('#registerPage')css("display", "block");

并隐藏所有其他视图

$('#pageid')css("display", "none");

并为按钮实现 addEventListener 试试这个。在你的onDeviceReady: function()里面

像这样定义所有按钮

$('#yourButtonId').click(fucntionNameHere);

并实现您的所有功能。如果您对这种方式有任何问题，请告诉我，我会帮助您。

【讨论】：

首先我想告诉你，申请已经完成了。我现在什么都改变不了。我已经添加了上面的后退按钮。现在我想在点击后退按钮时重置页面。如果您对此方案有任何想法，请提出建议。