jQuery mobile在pagechange事件上运行到特定页面

时间:2013-08-27 14:19:01

标签: events jquery-mobile

如果特定的jQuery移动页面发生变化,我想抓住该事件。例如,我使用了我在下面指出的代码:

$(document).on("pagechange", function () {
    alert("page changed");
});

但是,如何才能使此功能仅针对特定页面运行,例如:具有id =“myPage”的页面?我想只在myPage被更改时才提醒它。

(*我在jquery mobile中使用多页结构)

2 个答案:

答案 0 :(得分:1)

我认为您可以在页面上注册事件而不是文档:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>   
<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <p>Page 1</p>
    <div data-role="navbar">
    <ul>
      <li><a href="#pagetwo" >TWO</a></li>
      <li><a href="#" class="ui-btn-active ui-state-persist">ONE</a></li>
    </ul>
    </div>
  </div>
</div> 
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
  <p>Page 2</p>
  <div data-role="navbar">
   <ul>
     <li><a href="#" class="ui-btn-active ui-state-persist">TWO</a></li>
     <li><a href="#pageone" >ONE</a></li>
   </ul>
   </div>
</div>
</div>
<script>
$("#pageone").on("pageshow", function() {
    alert("cambio a pagina 1");
});
$("#pagetwo").on("pageshow", function() {
    alert("cambio a pagina 2");
});
</script>
</body>
</html>

如果您更喜欢pagechange事件,则可以获取页面网址:

$(document).on("pagechange", function(toPage) {
    alert(toPage.currentTarget.URL);
});

答案 1 :(得分:0)

$(document).on('pagechange', '#myPage', function (event) {
    alert("I alert only on #myPage");
});