Jquery mobile JQueryMobile弹出窗口样式不正确

我试图使用jQuery Mobile显示一个弹出窗口，但我对弹出窗口的样式有问题。 HTML标记如下所示：

<div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="a" class="ui-corner-top">
            <h1>Delete Page?</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <h3 class="ui-title">Are you sure you want to delete this page?</h3>
            <p>This action cannot be undone.</p>
            <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>    
            <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>  
        </div>
    </div>

删除页面？
是否确实要删除此页？
此操作无法撤消

（顺便说一句，此代码是从jQuery移动站点复制的）

当我使用.popup（'open'）方法打开弹出窗口时，标题（删除页面？）和按钮没有样式。标题显示为常规文本，按钮显示为常规链接

什么会导致这种行为

---

谢谢

您的HTML中可能有错误

下面是代码中的一个工作示例：

使用jQuery 1.9或更高版本时，必须在上使用函数，live已不推荐使用，不再存在

$(document).on('pagebeforeshow','#index',function(e,data){    
    $(document).on('click', '#test-button',function(e) {
        $('#confirmDialog').popup('open');
    });    
});

---

您可能还使用了可用于事件绑定的文档。它不应该与jQuery Mobile一起使用，而是使用

我认为您的问题是在标题之前定义弹出id。您可以在正文部分和内容部分之前对其进行定义。然后在内容部分，您可以定义调用按钮并将其设置为弹出调用。

好的，您的代码给了我所需的提示。。。问题是我的弹出窗口不在“内容”部分。谢谢！

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $('#confirmDialog').popup('open');
    });    
});

$(document).on('pagebeforeshow','#index',function(e,data){    
    $(document).on('click', '#test-button',function(e) {
        $('#confirmDialog').popup('open');
    });    
});