JQuery Mobile 1.4 - 小部件在页面上显示正常,但在Popup上没有外观

时间:2014-10-20 14:07:48

标签: javascript jquery html5 jquery-mobile

(这将是一个自我回答的问题,我花了很多时间用它,也许其他人没有这样做。)

当我将滑块小部件放到页面(data-role="page")时,它们可以工作,但是当我将相同的HTML cose放在弹出窗口(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的影响。

1 个答案:

答案 0 :(得分:1)

首先,我尝试了一个黑客攻击:我将小部件放在隐藏的<div>和占位符<div>中的弹出窗口中,然后我将隐藏的内容复制到占位符中。仅当隐藏<div>所在的页面已经出现时,这才起作用。此外,还有一个问题:弹出窗口的位置是在“空”状态下确定的,所以当我添加小部件时,位置没有调整到它,弹出窗口似乎位于正常情况下。

最后,我发现了遗漏的东西。弹出窗口应按以下方式初始化:

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

情况是“创建”触发器在页面出现时应用于页面,但不会出现在弹出窗口上,即使它们位于页面内。