javascript - JQuery Mobile 1.4 - 小部件在页面上显示正常，但在弹出窗口上没有皮肤

Question

(这将是一个 self 回答的问题，我花了很多时间在这上面，也许其他人没有这样做。)

当我将 slider 小部件放入页面 ( data-role="page" ) 时，它们可以工作，但是当我将相同的 HTML 代码放入弹出窗口 ( data-role="popup" ) div 中时，JQM 不会添加类和监听器，它们仍然存在未受影响的标准 HTML5 小部件。

<label for="width">Width:</label>
<input type="number" data-type="range" id="width" name="width" min="1" max="4" value="1" >

我使用以下代码来初始化弹出窗口:

$("div[data-role='popup']").popup();

然后我用它来打开:

$("#mypopup").popup("open");

弹出窗口将打开，具有正确的外观和位置等，但小部件仍不受 JQM 影响。

Answer 1

首先，我尝试了一种破解:我将小部件放在隐藏的 <div> 中和占位符 <div>进入弹出窗口，我已将隐藏内容复制到占位符中。仅当页面隐藏 <div> 时才有效。居住地已经出现。另外，它还有一个问题:弹出窗口的位置是在“空”状态下确定的，因此当我添加小部件时，位置尚未调整到它，弹出窗口似乎放置在正常位置下方。

终于，我找到了缺失的东西。弹出窗口应按以下方式初始化:

$("div[data-role='popup']").popup().trigger("create");

情况是“创建”触发器在页面显示时应用于页面，但不适用于弹出窗口，即使它们位于页面内部。