我的应用程序中有一个动态选择框。单击任何列表项时,我需要在弹出窗口中显示项目详细信息。但我无法打开现在没有发生的弹出窗口/对话框,我的代码是,
$( "#locationList" ).on( "click", "li", function( event ) {
alert("click event");
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
});
我能够看到警报,但对话框未打开。
<div data-role="dialog" id="dialog">
<div data-role="header">
<h1>List Item details</h1>
</div>
<div data-role="main" class="ui-content">
<h2>Welcome to my Popup Dialog!</h2>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
列表元素应该动态地来自数据库,例如,
var optionheading = '<li value="Select Location">Select Location</li>';
for (var i = 0; i < res.rows.length; i++)
{
var opt = '<li value="';
opt += res.rows.item(i).Location;
opt += '">';
opt += res.rows.item(i).Location;
opt += '</li>';
$("#locationList").append(opt);
}
$("#locationList").listview('refresh');
HTML:
<ul data-role="listview" id="locationList" data-dismissible="false" style="height: 150px;border:1px solid #ccc;background:#f2f2f2;font:normal 11px/15px arial;padding:6px;color:#333; overflow: auto" name="locationList" data-inset="true">
</ul>
任何建议!!
最佳答案
您的对话框有
id="dialog"
但是您的 JavaScript 正在尝试弹出一个 id 为 myPopupDialog 的对话框:
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
这些 ID 必须匹配!
如果您使用的是 jQM 1.4.x,您的对话框页面应使用 data-dialog="true":
<div data-dialog="true" id="myPopupDialog">
Here is a working DEMO
关于javascript - 在 javascript 中打开弹出窗口/对话框时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24759781/