$.mobile.loadPage() 不工作

Question

$.mobile.loadPage('view-video'); 不工作，下面是示例代码。请帮我解决这个问题。

我收到警报 "Function Triggered"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="index">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>I Am Now A Mobile Developer!!</p>
    <a href="javascript:void(0)" class="loadVideo">Load Video</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

<div data-role="page" id="view-video">
  <div data-role="main" class="ui-content">
    Your Video Will be Here.
  </div>
</div> 

<script type="text/javascript">
    $(document).on('click', '.loadVideo', function(e){
        alert('Function Triggered');
        $.mobile.loadPage('view-video');
    });
</script>
</body>
</html>

Answer 1

首先是documentation says

Note: jQuery.mobile.loadPage is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use the pagecontainer widget's load() method instead.

知道了 working in this Fiddle with JavaScript. Instead of $(':mobile-pagecontainer').pagecontainer('load', "view-video); it have to be $(':mobile-pagecontainer').pagecontainer('change', "#view-video");! (change 而不是 load 并且 # 因为它是一个 id)

有关详细说明，请参阅 jQuery Mobile Demos。重要的是每个页面都有它的 data-role="page" 属性 => jQuery Mobile Tutorial

$.mobile.loadPage() 不工作

$.mobile.loadPage() not Working

jquery

jquery-mobile