jquery移动pageshow事件发射两次

我目前有一个移动网站，我正在建设和我在整合自定义JQuery小部件的麻烦。由于某种原因，页面展示事件会先发生两次，无论哪一页首先被加载。jquery移动pageshow事件发射两次

为了便于理解，我已经创建了两个HTML页面

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>One</title> 

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
    }); 
    </script> 
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script> 

</head> 
<body id="default"> 
    <div data-role="page" id="content-one"> 
     <div role="main" class="ui-content" id="one-content"> 
      One<br/> 
      <a href="two.html">back to two</a> 
     </div> 
     <script type="text/javascript"> 
     (function($, undefined) { 
      $.widget("test.stuff", { 
       _create : function() { 
        console.log("create"); 
       }, 
       _init : function() { 
        console.log("_init"); 
       }, 
       destroy: function() { 
        this.element.empty(); 
        $.Widget.prototype.destroy.call(this); 
       } 
      }); 
     })(jQuery); 
     </script> 
     <script type="text/javascript"> 
     $(document).on("pageshow", "#content-one", function() { 
      console.log("pageshow1"); 
      $("#content-one").stuff({}); 
     }); 
     $(document).on("pagebeforeshow", "#content-one", function() { 
      console.log("pagebeforeshow1"); 
     }); 
     </script> 
    </div> 
</body> 
</html>

第2页

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>Two</title> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"> </script> 
    <script type="text/javascript"> 
    $(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
    }); 
    </script> 
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script> 

</head> 
<body id="default"> 
    <div data-role="page" id="content-two"> 
     <div role="main" class="ui-content"> 
      Two<br/> 
      <a href="one.html">back to one</a> 
     </div> 
     <script type="text/javascript"> 
     $(document).on("pageshow", "#content-two", function() { 
      console.log("pageshow2"); 
     }); 
     $(document).on("pagebeforeshow", "#content-two", function() { 
      console.log("pagebeforeshow2"); 
     }); 
     </script> 
    </div> 
</body> 
</html>

要重新加载页面一个第一，转到页两个使用链接，然后使用链接导航到第一页。

当页面1再次被加载时，页面显示事件被触发两次。我将reloadPage设置为true，因为我的页面具有动态内容，并且无法提供缓存页面。

我很可能会错误地使用这些事件。

来源

2014-01-24 mfleshman

'reloadPage'已被弃用，不再可以被设置为_option_。而是使用'$ .mobile.pageContainer.pagecontainer（“change”，“page.html”，{reload：true}）;'以加载页面并以编程方式重新加载。另外，'pageshow'已被弃用，但仍在运行，使用'$（document）.on（“pagecontainershow”，function（）{code}）;'。 – Omar

如果我不应该使用reloadPage我应该使用什么机制来确保每次加载每个页面并且不从缓存中取出？我希望这是所有导航的默认功能。 – mfleshman

'reload'而不是'reloadPage'。 – Omar

尝试用$(document).one("pageshow", ...)代替$(document).on("pageshow",...)，将事件限制为一次调用http://api.jquery.com/one/。

问题是，在内联脚本中使用on会在每次加载页面时创建一个新事件。因此，当您第一次加载页面时，将执行内联脚本并触发页面显示事件。第二次再次触发新事件，但第一次仍在收听内容 - 一次页面显示。事实上，如果你重复这个过程，你会看到三，四，...次的日志。

另一种选择是在头部创建一个脚本，它在$(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...)中设置所有必需的触发器。在这种情况下，脚本只会被初始化一次，所以它会起作用。

来源

2014-03-21 00:10:52 gfg

浪费了大约2个小时试图做这里和其他网站的所有修复。我放弃了，他们把一个if语句，以防止再次发射

var hasDownload = false; 
$(document).on("pageinit", "#mypage",function(event){ 
    if (hasDownload === false) { 
     hasDownload = true; 
     // do some work 
    } 
);

来源

2014-08-01 03:06:04 Gplex314159

尝试在隐藏事件删除页面，就像这样：

$(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
     $(docuement).on('pagehide', function (event, ui) { 
      $(event.target).remove(); 
     }); 
    });

Remenber，如果您不要禁用ajax，所有请求将与AJAX

来源

2015-07-25 14:52:07

jquery移动pageshow事件发射两次

回答

相关问题