Question

我是Jquery mobile和Jquery的新手。我正在尝试开发移动应用程序。问题是我有一个结果页面显示产品的结果，点击任何产品将带你到关于该产品的描述页面。我在页面中间有5个按钮的导航栏，每个按钮链接到不同的页面。我想在导航栏下面的div块中加载相应的页面。我使用了jquery document.ready函数，它工作正常，但是当我点击结果页面上的特定产品时，它会将我带到描述页面，但动态加载仅在我重新加载该描述页面后才会发生。有关改进或改进方法的任何建议吗？

结果页面。

<div data-role="page" id="page">
    <div data-role="header" data-theme="a">
    <a href="#mypanel" data-role="button" data-icon="grid">Menu</a> <!--Top right MENU button -->
    <h1> Results </h1>
    </div> <!-- end of the header -->


    <div data-role="content">    <!-- Start of the content -->
    <form method="post">
    <ul data-role="listview">
    <li>
    <a href="wine.php?wid=1">
    <img src="images/images.jpg" width="100" height="100" style="padding:10px;"   />
    <h1> Wine 1</h1>
    <p style="font-style:italic"> This is wine 1 </p>
    <h3> 1962</h3>
   </a>
    </li> 
    <li><a href="wine.php?wid=2" data-transition="slide"><img src="images/images (1).jpg" height="100" width="100"   style="padding:10px;"/><h1> Wine 2</h1>
    <p> This is wine 2 </p>
    <h3> 1962</h3>
    </a>
    </li> 
    <li><a href="wine.php?wid=3"><img src="images/images.jpg" height="100" width="100"  style="padding:10px;" /><h1> Wine 3</h1>
    <p> This is wine 3 </p>
    <h3> 1962</h3>
    </a>
    </li> 
    <li><a href="wine.php?wid=4"><img src="images/images.jpg" height="100" width="100"  style="padding:10px;" /><h1> Wine 4</h1>
    <p> This is wine 4 </p>
    <h3> 1962</h3>
    </a>
    </li> 
    <li><a href="wine.php?wid=4"><img src="images/images (1).jpg" height="100" width="100"  style="padding:10px;" /><h1> Wine 5</h1>
    <p> This is wine 5 </p>
    <h3> 1962</h3>
    </a>
    </ul>
    </li>
    </div>

描述页面：

<body> 
<div id="result" data-role="page">
<div data-role="header">
<a href="#mypanel" data-role="button" data-icon="grid">Menu</a> <!--Top right MENU button -->
<h1> Wine Description </h1>
</div>
<div data-role="content" id="swipe">
<?php while($row = mysql_fetch_object($result))
{
    echo '<h1>'.$row->wine_name.'</h1>';
    echo '<p>'.$row->wine_id.'</p>';
    echo '<p>'.$row->wine_desc.'</p>';
    echo '<p><i>'.$row->year.'</i></p>';

}
?>
</div>
<div data-role="navbar" style="background-color:#000; color:#FFDFFF; height:50px; padding:2px 2px 2px 2px">
<ul id="menu">
<li><a id="description"> Description</a></li>
<li><a id="producer" > Producer</a> </li>
<li><a id="journal">Journal </a></li>
<li><a id="rating"> Ratings </a></li>
<li><a id="mediaRating"> Media Ratings </a></li>
</ul>
</div>

<div id="content"></div>

.js文件：

$(document).ready(function(e) {

    $('#content').load('description.php');
    $('ul#menu li a').click(function(e){
    //  alert('U have reached the click function')
    var page = $(this).attr('id');  
 // alert("Hello World "+page);
     $('#content').load(page+'.php');

    });

});

假设已加载所有依赖项。我正在使用Jquery Mobile 1.3.1，Jquery 1.10

Answer 1

我想我理解你的问题，如果我是正确的，你需要改变页面处理。当jQuery Mobile处理页面时，它使用 AJAX 将它们加载到DOM中。只有第一页完全加载，其他每一页都会从 HEAD 内容中删除，只会加载 data-role="page" div。

这就是为什么你的javascript只在页面重新加载后才能运行。要了解有关此问题的更多信息，请查看此 ARTICLE 。你会在那里找到几个有效的解决方案。

Jquery Mobile加载页面

1 个答案: