在 history.back() Phonegap 之后单击事件触发两次或更多次答案

【问题标题】：Click event firing twice or more after history.back() Phonegap在 history.back() Phonegap 之后单击事件触发两次或更多次
【发布时间】：2013-11-29 06:03:47
【问题描述】：

我在 phonegap 中有两个 html 页面。 index.html 和 second.html. 我把我所有的脚本放在头部分。在index.html 页面中，我放置了我所有的 Jquery 和 Ajax 代码。这是我用来更改页面的一些代码sn-ps。

Index.html

     <!DOCTYPE html>
          <html>
            <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title>
        </title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/mystyle.css" />



        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
         <script type="text/javascript" src="cordova-2.7.0.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
        <script>
        </head>
        function callAnothePage(check)
            {
                $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter="+check, data : { 'paremeter' : check }, reloadPage : false, changeHash : true });
            }
        $(document).on('pageshow', "#second",function () {
                var parameters = $(this).data("url").split("?")[1];;
                parameter = parameters.replace("paremeter=","");
                });
        $(document).on('pageshow', "#index",function () {
                $(document).on('click', "#news",function () { //Something Something  });
});
    $(document).on('pageshow', "#second",function () {
     $(document).on('click', "#back",function () {     

                history.back();
            });
    </script>


        <body>
        <!-- Home -->
        <div data-role="page" id="index">
            <div data-role="header">
                <h3>
                   Title
                </h3>
            </div>
            <div data-role="content">
              <img src="img/logo5.png" />

              <a data-role="button" id="news">News</a>

            </div> <!--content-->

            <div data-role="content">
            <div><span class="status"></span></div>

               </div> <!--content-->
        </div><!--page--> 
        </body>
        </html>

类似的东西。还有我的

second.html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>

   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="second">
        <div data-role="header">

            <div id="new_title">

            </div>
        </div>
        <div data-role="content">
            <div id="news_date" class="mybutton"></div>
            <br/>
            <div id="news_description"></div>
            <br/><br/>
            <a data-role="button" id="back" class="mybutton_back">Back</a>
        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

所以第一次它工作正常。所有事件都运行良好。它在单击按钮后使用 jquery 完成一些工作并转到second.html 页面。查看second.html 后，我使用history.back() 回来了，然后问题就开始了。所有按钮点击工作两次。所有 ajax 调用都工作了两次。如果我再次转到第二页并返回，则事件会触发 3 次，依此类推。我认为脚本会加载多次。

我尝试$.mobile.changePage() 回到index.html。但它变得更糟。然后所有events 都失败了。如果我使用它，点击事件或 ajax 调用不会起作用。

如何阻止这种情况？如何防止脚本多次加载？
或者有什么办法可以让我完全加载页面吗？我的意思是所有以前的脚本加载都会被遗忘？

【问题讨论】：

请为此创建一个 JSfiddle.. 以便更好地理解...
你可以使用一些替代品...
放置在错误的位置...
@Purus 抱歉。我在复制粘贴代码的不同部分时错过了。标签在实际代码中处于正确位置。
@Coder 它的工作原理与 history.back() 相同

标签： jquery ajax cordova

【解决方案1】：

您的代码有问题。如果您单击按钮多次，它将执行多次。为什么？因为一旦单击按钮，事件单击将执行 1，下一次单击将执行上一个的 1 + 1 事件单击，以此类推，如果单击多次，则为 1 + 1 + 1，...
防止多次触发事件的解决方案： 1. 使用 off() 或 one：

$('#back').off().on('click',function(){

});
$('#back').one('click',function(){

});

2。使用标志：

var flag = true;
$('#back').on('click',function(){
    if(flag){
        flag = false;
        //code here
    } 
});

查看link 了解更多信息。

【讨论】：

【解决方案2】：

找到了解决办法。

document.location = "index.html"

使用它进入上一页，防止事件触发两次。无法解释原因，但对我有用。

【讨论】：

【解决方案3】：

  $(document).on('click', "#back",function () {
           if(event.handled !== true)
           {
                $.mobile.defaultPageTransition = "slide";                
                var href = $(this).attr("href");
                event.preventDefault();
                if ( event === "click" ) { return; }                      
                $.mobile.changePage(href);
           }
           return false;               
   });

【讨论】：

不，同样的结果。返回 index.html 后触发两次