jQuery mobile - 在更改页面上加载多个页面答案

【问题标题】：jQuery mobile - Multiple page loads on change pagejQuery mobile - 在更改页面上加载多个页面
【发布时间】：2015-12-03 19:19:26
【问题描述】：

我正在使用带有持久标头的多页格式。我可以使用直接超链接或使用 $(':mobile-pagecontainer').pagecontainer('change'

成功更改页面

代码运行良好，但似乎每次我单击按钮更改页面时都会“加载”一次额外的页面。在此代码中，按钮更改页面并输出 console.log 消息。单击时，我希望页面会更改并看到 one "#btn - page x" console.log 消息。发生的情况是页面发生了变化，并且我在每次加载页面时都会收到一条控制台消息，而不仅仅是一个。即使我的代码可以正常工作，但这是不对的 - 这只会随着用户的正常使用而上升。

我在这里不明白什么？

我创建了一个jsfiddle 来说明我的意思。例如，如果我单击“转到第 x 页”按钮 6 次（即每页 3 次），我会得到 3 个“#btn - 第 x 页”消息的输出，而不仅仅是一个。

与标题按钮相同 - 每次我更改页面时，标题按钮的响应数量都会增加。

html:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>problem</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> 

<body> 

    <div data-role="header" data-position="fixed" data-theme="a"> 
        <a href="#" data-role="button" id="headerbtn">header button</a>
    </div>

    <div data-role="page" id="page1" data-title="Page 1">
        <div data-role="content">
            <h1>I am page 1</h1>
            <a href="#page2" data-role="button" id="btntest1">goto page2</a>
        </div>
    </div>

    <div data-role="page" id="page2" data-title="Page 2" data-theme="b">
        <div data-role="content">
            <h1>I am page 2</h1>
            <a href="#page1" data-role="button" id="btntest2" data-rel="back">goto page1</a>
        </div>
    </div>

<script src="problem.js"></script>
</body>
</html>

和js：

$(document).on('pagebeforeshow','#page1',function(){
    console.log('#page1 pagebeforeshow');
    $('#btntest1').click(function(){
        console.log('#btn - page1');
        //$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
    });
});

$(document).on('pagebeforeshow','#page2',function(){
    console.log('#page2 pagebeforeshow');
    $('#btntest2').click(function(){
        console.log('#btn - page2');
        //$(':mobile-pagecontainer').pagecontainer('change', '#page1', { reloadPage: false});
    });
});

$(function() {
    $("[data-role='header']").toolbar();
});

$(document).on('pagebeforeshow',function(){
    console.log('pagebeforeshow');
    $('#headerbtn').click(function(){
        console.log('headerbtn click');
    });
})

更新：所以我一直在尝试各种方法来解决这个问题，包括删除 data-rel="back"、尝试 data-ajax="false"（这违背了我正在尝试做的事情）、改变带有

的页面

$(':mobile-pagecontainer').pagecontainer('change', '#page2');

或

$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});

但没有快乐。显然，我试过谷歌搜索，但找不到任何帮助。在完整的应用程序代码中，按钮与数据库通信，因此随着点击次数的增加，我在每次点击时多次向数据库发送和检索相同的数据。

如果有人对我能做什么有任何想法，我真的很感激一些指导？

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

问题是每次进入页面时，都会再次在元素上绑定监听器。所以你绑定了多个监听器。监听器不应该写在pagebeforeshowhandler 里面。

这样取出来：

$(document).on('pagebeforeshow','#page1',function(){
    console.log('#page1 pagebeforeshow');

});

$('#btntest1').click(function(e){
    e.preventDefault();
    console.log('#btn - page1');
    $(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});

对于第 2 页也是如此。

【讨论】：