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

Question

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

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

我写了下面的代码来添加返回按钮。 (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    
});

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

Answer 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 的事件

Answer 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);

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