jQuery Mobile Popup在加载的html中不起作用

Scott Taylor 发表于 Dev

斯科特·泰勒（Scott Taylor）

所以我希望我正确地问这个。

我有从php文件中加载到html页面中的内容。php文件包含可折叠集的信息。一旦我更改了弹出div的html，该弹出窗口就无法用于从php文件发回的数据。

这是因为最初加载页面时内容不存在吗？如果是这种情况，我该如何加载该内容。我真的想尽可能地将php保留在主要的html页面之外。尽管我开始意识到这可能是不可能的。任何帮助，将不胜感激。

这是我的html页面（在提交初始化页面后加载此页面）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>theClipboard: Count</title>
    <link rel="stylesheet" href="../inc/stylez.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container">
<div data-role="page" data-theme="b" id="countStartedPage">

    <div data-role="header" data-position="fixed" class="ui-grid-c">
        <div class="ui-block-a">
            <a href="#categoryMenu" data-rel="popup" data-transition="slidedown"
               class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">category</a>
            <div id="loadCatMenuHere">
                <!--<div id="categoryMenu" data-role="popup" data-theme="b">
                <p>is it working</p>
                </div>-->
            </div>
        </div>
        <div class="ui-block-b">
            <p>location menu</p>
        </div>
        <div class="ui-block-c">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Go Back</a>
        </div>
        <div class="ui-block-d">
            <p>validate counts</p>
        </div>
    </div>
    <div data-role="main" id="countPageContent">
        <h3> content goes here</h3>
    </div>
    <div data-role="footer" data-position="fixed">
        <p class="centerText">copyright 2016 tosco(rs)2 all rights reserved</p>
    </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!--
<script src="countJS.js"></script>
-->

<script>
    $(document).ready(function(){
        console.log("page 2 loaded");
        getCategoryMenu();
        function getCategoryMenu() {
            var getCatMenu = $.post('categoryMenu.php');
            getCatMenu.done(function (data) {
                console.log("received cat menu #categoryMenu.html: " + $('#categoryMenu').html());
                $('#loadCatMenuHere').html(data);
                console.log("#category menu data:  " + data);
            });
            getCatMenu.fail(function (data) {
                console.log("failed at getting cat menu:");
            });

        }
    })

</script>

</body>
</html>

这是我从中提取的PHP文件

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>


<?php
include("../inc/connect.php");

session_start();

$buildFamMenu = $conn->prepare("select familyName from familyTbl order by familyPriority");
$buildFamMenu->execute();
$buildFamMenu->store_result();
$buildFamMenu->bind_result($family);

$buildCatMenu = $conn->prepare("select categoryID, categoryName from categoryTbl where family = ? order by categoryPriority");
$buildCatMenu->bind_param("s", $family);
$buildCatMenu->execute();
$buildCatMenu->store_result();
$buildCatMenu->bind_result($categoryID, $categoryName);
echo "<div id='categoryMenu' data-role='popup' data-theme='b'>";
echo "<div data-role='collapsibleset'>";

while ($buildFamMenu->fetch()) {
echo "<div data-role='collapsible'>
        <h3>" .$family ."</h3>
        <ul><li>test</li><li>test2</li><li>test3</li></ul>
      </div>";
}

 echo "</div></div>";


?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>