Javascript jQuery移动对话框空白

我一直在互联网上寻找解决方案，但没有找到任何解决方案。
在我的jQuery移动应用程序中，我有多个HTML文件，每个文件代表一个页面，以保持工作流的整洁，因此我使用AJAX进行导航。
我在我的页面

fleet.html

（导航中的第三个）的地图上有一个按钮，它可以打开一个对话框，打开过程是用javascript完成的，只有当我点击按钮时，它才会显示一个空白的对话框，其中没有文本，也没有按钮。
下面是

fleet.html

：

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"></div>
        </div><!-- END map-container -->
    </div><!-- END content -->

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
        <div data-role="header" data-theme="b">
            <h3>Informations</h3>
        </div>
        <div data-role="content">
            <p>POI Infos</p>
        </div>
    </div>

</div><!-- END page -->

试试这个

function onSelectFeature() {
    $.mobile.changePage( "#deviceInfoDialog", { role: "dialog", transition: "slidedown" } );
}

你的html应该是这样的

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"></div>
        </div><!-- END map-container -->
    </div><!-- END content -->
</div><!-- END page -->

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
        <div data-role="header" data-theme="b">
            <h3>Informations</h3>
        </div>
        <div data-role="content">
            <p>POI Infos</p>
        </div>
    </div>

弗洛特
信息
POI信息

将对话框div移到页面div之外。添加一个隐藏链接，单击该链接将打开对话框。重新编写脚本函数以模拟被单击的链接

我对此进行了测试，效果良好：

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"> <a href="javascript: onSelectFeature();">onSelectFeature</a></div>
        </div><!-- END map-container -->
    </div><!-- END content -->


    <script>
        function onSelectFeature() {
            $("#lnkDeviceInfoDialog").click();
        }
    </script>

    <a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a>


</div><!-- END page -->

<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
    <div data-role="header" data-theme="b">
        <h3>Informations</h3>
    </div>
    <div data-role="content">
        <p>POI Infos</p>
    </div>
</div>

弗洛特
函数onSelectFeature（）{
$（“#LNKDeviceInfo对话框”）。单击（）；
}
信息
POI信息

您使用的是哪个版本？？jQuery Mobile 1.3.1-jQuery 1.10.2控制台显示了什么？检查我的更新。我相信你的对话应该在主页之外。它就像一个多页html。请提供一个JSFIDEL，我认为这是将对话框或页面移出主页的关键。我也犯了同样的错误，我在想，因为对话框和页面是不一样的，它们可以彼此共存，谢谢你的澄清！

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"> <a href="javascript: onSelectFeature();">onSelectFeature</a></div>
        </div><!-- END map-container -->
    </div><!-- END content -->


    <script>
        function onSelectFeature() {
            $("#lnkDeviceInfoDialog").click();
        }
    </script>

    <a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a>


</div><!-- END page -->

<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
    <div data-role="header" data-theme="b">
        <h3>Informations</h3>
    </div>
    <div data-role="content">
        <p>POI Infos</p>
    </div>
</div>