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

Question

我正在 jQuery Mobile 应用程序中填充更新历史记录列表。我希望在列表中包含关键更新数据，并在用户按下信息工具提示时显示更详细的数据。下面的应用程序运行时的屏幕截图。

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

我正在为每个弹出窗口组装 HTML 并添加到专用弹出窗口中的 DOM <div> 。每个弹出窗口注入(inject)的 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 看起来非常不同。弹出窗口 <div> 取代了我添加的 HTML现在由占位符填充

<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()

使用您分配给所有弹出窗口的 updateWidgetPopup 类在实际弹出窗口上调用 popup():

$(".updatesWidgetPopup").popup()

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