jQuery Mobile - 动态创建的弹出窗口

Question

我在jQuery Mobile应用中填充了更新历史记录列表。我想在列表中包含关键更新数据，并且当用户按下信息工具提示时会显示更详细的数据。以下应用程序的屏幕截图，当它工作时。

目前只有在页面刷新后才能正常工作 - 在接收新数据时，所有弹出窗口都是可见的，打开的（在列表下方），并且无法关闭它们。

我为每个弹出窗口组装HTML并在专用弹出窗口<div>中添加到DOM。每个弹出窗口的注入HTML看起来像

<div data-role="popup" id="updateInfo_0.04" class="ui-content updatesWidgetPopup" data-theme="b" data-position-to="window">...data in here..</div>

页面刷新后，一切都很完美。单击工具提示时，弹出窗口不可见并正确打开/关闭。在jQuery mobile发挥其魔力之后，DOM看起来非常不同。而不是我添加的HTML，弹出窗口<div>现在由占位符填充

<div style="display: none;" id="updateInfo_0.04-placeholder">
    <!-- placeholder for updateInfo_0.04 -->
</div>

并且DOM现在有一个附加的列表

<div class="ui-screen-hidden ui-popup-screen ui-overlay-inherit" id="updateInfo_0.04-screen"></div>
<div class="ui-popup-container ui-popup-hidden ui-popup-truncate" id="updateInfo_0.04-popup">
    ... my HTML is now here in this inner div ...
</div>

我已经尝试过$("#popupsDiv").popup()，看看在收到数据后是否会正确初始化内容，但它无法正常工作。我唯一能想到的是手动创建上面的JQM HTML，这样它就可以在不刷新页面的情况下工作，但这看起来并不合适。弹出窗口是不是意味着像这样动态创建？

Answer 1

而不是

$("#popupsDiv").popup()

使用您分配给所有弹出窗口的类updatesWidgetPopup在实际弹出窗口上调用popup（）：

$(".updatesWidgetPopup").popup()

这会为每个动态创建的弹出窗口初始化弹出窗口小部件。