Jquery Mobile加载页面

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

结果页面。

<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

来源

2013-07-22 Sidharth

我想我理解你的问题，如果我没错，你需要改变页面处理。当jQuery Mobile处理页面时，它使用AJAX将它们加载到DOM中。只有第一页完全加载，其他页面将从其HEAD内容中剥离，并且只有data-role="page" div将被加载。

这就是为什么你的JavaScript只在页面重新加载后才工作。要了解更多关于这个问题的信息，请看看这个ARTICLE。您将通过工作示例找到几个可行的解决方案。

来源

2013-07-22 20:16:09 Gajotres

Stack Overflow上的主题有很多很好的信息... – Jasper

Jquery Mobile加载页面

回答

相关问题