为什么当我来自某个页面时我的内容没有被加载，而当我在 jquery mobile 中刷新它时被加载

Question

我需要以下方面的帮助。有 3 个页面，第一个是静态的，第二个是动态的，基于第三个也是动态的。

当它从第 1 次导航到第 2 次时，它会获取显示的内容，但是当它从第 2 次导航到第 3 次时，它无法加载内容。但是当我刷新页面时，它会加载内容。我无法理解这有什么问题。谁能帮我解决这个问题？

Javascript：

<script type="text/javascript">
    $(document).ready(function () {
        var b_id = getUrlVars()["b_id"];
        $.ajax({
            url: 'http://localhost/ajax_practice/php/get_categories.php?b_id=' + b_id,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function (data, status) {
                $.each(data, function (i, item) {
                    var output = "";
                    $(".main_category").append(output);
                    $(".main_category").listview("refresh");
                    output += "<li>";
                    output += "<a href='directory.html?c_id=" + item.id + "&b_id=" + b_id + "' data-transition='slide' rel='external'>";
                    output += item.category_name;
                    output += "</a>";
                    output += "</li>";
                    $(".main_category").append(output);
                    $(".main_category").listview("refresh");
                });
            }
        });
    });
</script>

HTML页面

<div data-role="page" id="page">
    <div data-role="header">
        <ul class="header_box" data-theme="d">
            <li>
                <select data-native-menu="false" name="selectmenu" id="selectmenu" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
                <select data-native-menu="false" name="selectmenu2" id="selectmenu2" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
            </li>
            <li>
                <a>
                    <img src="images/logo1.png"><span>www.justclick.co</span>
                </a>
            </li>
            <li>
                <select data-native-menu="false" name="selectmenu2" id="selectmenu3" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
                <select data-native-menu="false" name="selectmenu2" id="selectmenu4" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
            </li>
        </ul>
        <div class="header_search">
            <div class="search_input">
                <input type="text" placeholder="What ? e.g. Hotel" data-theme="d">
                <input type="text" placeholder="Where? eg. Area" data-theme="d">
            </div>
            <div class="search_button">
                <a>
                    <img src="images/search_button.png">
                </a>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div data-role="content">
        <div data-role="header">
            <div class="service_heading">Business Information & Services</div>
        </div>
        <ul data-role="listview" class="main_category"></ul>
    </div>
</div>

php代码

<?php header( 'Content-type: application/json'); 

    include 'connect.php'; 
    $b_id=$_GET[ 'b_id']; 
    $sql_select=mysql_query( "SELECT * FROM business_category WHERE b_id=$b_id") or die(mysql_error()); 
    $records=array(); 
    if(mysql_num_rows($sql_select)>0) { 
        while($row=mysql_fetch_array($sql_select)) { 
            $records[] = $row; 
        } 
        echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');'; 
    } else { 
        echo 'data not selected'; 
      } 
?>

当我从上一页来时，我无法获取页面的内容，但是当我刷新页面时，我得到了它。为什么会这样？

Answer 1

jQueryMobile 默认使用 Ajax 机制来实现页面之间的转换。请注意，当通过 Ajax 加载新页面时，不会加载包含在 head 标记中的脚本和样式。 jQueryMobile 只加载新页面的body 元素，更具体地说是data-role="page" 元素。

但是，当通过 HTTP 加载页面时，head 标记内的脚本和样式通常会被加载。这解释了为什么您的页面在直接打开页面时显示正确。

为了解决您的问题，您必须执行以下操作：

• 将$(document).ready(function() { 替换为$(document).on('pageinit', '#your-page-id', function() {
• 将第二页的script 从head 标记中移动到<div data-role="page"> 中，或者将script 放在一个普通的JS 文件中，然后将其加载到第一页的head 标记中

我希望这会有所帮助。