Fatal编程技术网
  • jquery/
  • Jquery 在历史记录之后单击事件触发两次或更多次。返回（）Phonegap

Jquery 在历史记录之后单击事件触发两次或更多次。返回（）Phonegap

jquery ajax cordova

Jquery 在历史记录之后单击事件触发两次或更多次。返回（）Phonegap,jquery,ajax,cordova,Jquery,Ajax,Cordova,我在phonegap中有两个html页面index.html和second.html. 我把我所有的剧本都放在头版。 在index.html页面中，我放置了所有Jquery和Ajax代码。下面是一些我用来更改页面的代码片段 Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m

我在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>

<!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>


函数调用页面（检查）
{
$.mobile.changePage（'second.html'，{dataUrl:'second.html？paremeter=“+check，数据：{'paremeter'：check}，重载页面：false，changeHash:true}）；
}
$（文档）。on（'pageshow'，“#second”，函数（）{
var参数=$（this.data（“url”）.split（“？”[1]；；
参数=参数。替换（“参数表=”，“”）；
});
$（文档）.on（'pageshow'，“#index”，函数（）{
$（document）.on（'click'，“#news”，function（）{//Something}）；
});
$（文档）。on（'pageshow'，“#second”，函数（）{
$（文档）。在（'click'，“#back”，函数（）{
历史。返回（）；
});
标题
新闻
像这样的，还有我的

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>
        <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>

<!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调用都有效两次。如果我再次进入第二页并返回，那么事件会触发三次，以此类推。我认为脚本会多次加载

我尝试了
$.mobile.changePage（）
返回
index.html
。但情况变得更糟。然后所有
事件都失败了。如果我使用它，则没有单击事件或ajax调用起作用

如何停止此操作？如何防止脚本多次加载？

或
有没有什么方法可以让我完全加载页面？我的意思是，以前加载的所有脚本都将被遗忘？
找到了解决方案


document.location = "index.html"



使用它进入上一页，防止事件触发两次。无法解释原因，但对我有效。
您的代码有问题。如果您多次单击按钮，它将执行多次。为什么？因为一旦单击按钮，事件单击将执行1，下一次单击将执行上一次的1+1事件单击，依此类推+1如果多次单击，…

多次防止事件火灾的解决方案：
1.使用off（）或一个：

2.使用标志：


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



查看更多信息。
请为此创建一个JSFIDLE。为了更好地理解…您可以使用一些替代方法…放置在错误的位置…@Purus对此表示抱歉。我在复制粘贴代码的不同部分时错过了。标记在实际代码中的位置正确。@Coder它的工作方式与历史相同。back（）不，相同的结果。返回index.html后触发两次