2012-03-21 17 views
-1

Вот мой упрощенный код, который имеет две страницы, которые ссылаются друг на друга. В результате оповещение счетчика страницы2 всегда говорит, что в DOM есть один # page2 div. Однако pagecreate пожаров для каждого раза, когда ссылка page2.html была указана. Первый раз 1, второй раз 2 и т. Д.Забавная проблема с pagecreate с jQueryMobile

Может кто-нибудь объяснить, что происходит, и как получить одно событие pagecreate для page2?

index.html 

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" /> 
    <script src="jquery-1.6.4.min.js"></script> 
    <script src="jquery.mobile-1.0.1.min.js"></script> 
</head> 
<body> 
    <div data-role="page"> 
     <div data-role="content"> 
      <h3>In Index Page</h3> 
      <a href="page2.html" data-role="button">Go To Page2</a> 
     </div> 
    </div> 
</body> 
</html> 


page2.html 

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div id="page2" data-role="page"> 
     <div data-role="content"> 
      <a href="index.html" data-role="button">Back</a> 
     </div> 
     <script type="text/javascript"> 
      alert("page2 count is " + $("#page2").length); 
      $("#page2").live('pagecreate',function(event, ui) { 
       alert("in page2 on pagecreate"); 
      }); 
     </script> 
    </div> 
</body> 
</html> 

Thanks, 
-- Ed 

ответ

0

jQM загружает последующие страницы в то же DOM (страницы), используя отладчик/Dev инструменты с Chrome вы можете легко увидеть это произойдет.

На последующих страницах он тянет что-либо между вашими тегами, но игнорирует все остальное, вы можете иметь JS на своих или других страницах, и он все равно будет тянуть только на странице2.

Что именно происходит с вами, так это то, что при загрузке # page2 при первом добавлении живого события на # page2 вы переходите к index.html, но # page2 остается в вашей DOM. Теперь, когда вы GOTO # стр.2 снова, он будет работать ваш JS снова

$("#page2").live('pagecreate',function(event, ui) { 
     alert("in page2 on pagecreate"); 
}); 

сковывает ваше предупреждение снова, и 2 события огня, в следующий раз 3 будет стрелять.

Путь вы должны это сделать, это загрузить все ваши JS в начале и прослушивайте pageinit/pageshow, видеть мою другую должность: https://stackoverflow.com/a/9085014/737023

Или если у вас есть какие-либо вопросы задать здесь

+0

Да, это помогает мне понять это намного лучше. Чтобы исправить мою проблему, я просто переместил live-привязку из page2.html и в скрипт заголовка в index.html - теперь предупреждение говорит о 1 элементе div и 1 pagecreate, когда каждый раз ссылается на page2.html. Благодаря! – emsieja

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