0

我是 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

4

1 回答 1

0

我想我理解您的问题，如果我是正确的，您将需要更改页面处理。当 jQuery Mobile 处理页面时，它使用AJAX将它们加载到 DOM 中。只有第一页完全加载，每隔一个页面将从其HEAD内容中剥离，并且只会data-role="page"加载 div。

这就是为什么您的 javascript 仅在页面重新加载后才能工作的原因。要了解有关此问题的更多信息，请查看此文章。您将在那里找到几个可行的解决方案以及工作示例。

于 2013-07-22T20:16:09.213 回答