Question

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

的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次，依此类推。我认为 Scripts 会多次加载。

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

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

Answer 1

找到解决方案。

document.location = "index.html"

使用它进入上一页，防止事件发生两次。无法解释原因，但为我工作。

Answer 2

您的代码存在问题。如果点击许多时间按钮，它将执行很多次。为什么？因为一旦你点击按钮，事件点击将执行1，然后点击它将执行1 + 1事件点击上一个，依此类推1 + 1 + 1，如果你点击很多时间，...
多次防止事件发生的解决方案： 1.使用off（）或one：

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

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

});

2。使用flag：

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

并查看link以了解详情。

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

在history.back（）Phonegap之后单击事件触发两次或更多次

3 个答案: