Событие Jquery Mobile pageshow стреляет дважды

У меня в настоящее время есть мобильный сайт, который я создаю, и у меня возникают проблемы с интеграцией пользовательского виджета JQuery. По какой-то причине событие showhow запускается дважды в зависимости от того, какая страница загружается первой.Событие Jquery Mobile pageshow стреляет дважды

Для простоты понимания я создал две HTML-страницы

Page 1

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

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

воссоздавать загрузки страницы один первый, перейдите на страницу два, используя ссылку, затем перейдите на страницу один, используя ссылку.

При повторной загрузке страницы один из сообщений о событии запускается дважды. У меня установлено значение 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).on("pageshow",...) на $(document).one("pageshow", ...), что ограничивает событие одним звонком http://api.jquery.com/one/.

Проблема заключается в том, что при использовании on в встроенном скрипте создается новое событие каждый раз при загрузке страницы. Таким образом, при первом загрузке страницы выполняется встроенный скрипт и запускается событие show. Во второй раз новое событие запускается снова, но первый из них все еще прослушивает одностраничный контент. Фактически, если вы повторите этот процесс, вы увидите журнал три, четыре, ... раз.

Другим вариантом может быть создание сценария в разделе главы, который устанавливает все необходимые триггеры в $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...). В этом случае сценарий будет инициализирован только один раз, поэтому он будет работать.

источник

2014-03-21 00:10:52 gfg

Отработано около 2 часов, пытаясь сделать все исправления здесь и на других сайтах. Я сдался и положи, если заявление в их, чтобы предотвратить его снова стрельбы

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 Mobile pageshow стреляет дважды

ответ

Смежные вопросы