Question

我正在使用jQuery Mobile，我需要打开一个带有动态内容的对话框。

这是JS代码：

$('.link').on( "click", function() {

    html = '';
    html += '   <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="header">';
    html += '       <h1>Title</h1>';
    html += '   </div>';
    html += '   <div id="dialog-content">text</a>';

    $('#dialog').html(html);
    $.mobile.changePage("#dialog");
});

这是用作对话框的div：

<div data-role="page" data-dialog="true" id="dialog"></div>

第一次完美运作。第二次我无法清除对话框内容并将其放入新内容中。新内容出现在第一个上瘾中。如果我尝试清除对话框内容，则无效：

$('#dialog').empty();

提前致谢

Answer 1

尝试删除并重新创建整个对话框，而不仅仅是内容：

$('.link').on( "click", function() {    
    html = '';
    html += '<div data-role="page" data-dialog="true" id="dialog" >';
    html += '   <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="header">';
    html += '       <h1>Title</h1>';
    html += '   </div>';
    html += '   <div role="main" class="ui-content" id="dialog-content">text</div>';
    html += '</div>';

    $('#dialog').remove();
    $('body').append(html);
    $('#dialog').enhanceWithin();
    $.mobile.changePage("#dialog");
});

这是 DEMO

此外，在1.4中，您应该开始使用pagecontainer：

，而不是changePage

$(":mobile-pagecontainer").pagecontainer( "change", "#dialog");

更新了 DEMO

Answer 2

我认为解决此问题的最正确方法是：

您不应动态创建对话框。

只需更新对话框内容，比这项工作更简单：http://cbtechdev.blogspot.com/2015/11/jquery-mobile-dialog-update-content.html

＆＃13;

update_dialog_content = function(){
    var dialog = $("#dialog");
    dialog.find('div[data-role=content]').html($('#content').val());
}

$('#show').click(update_dialog_content);

＆＃13;

<html>    
    <head>
        <title>example</title>
    </head>
    <body>
<div id="page" data-role="page">
        <div data-role="header">
            <h1>jQuery Mobile</h1>
        </div>
        <div data-role="content">
            <input id='content' />
            <a id="show" href="#dialog" data-role="button">Show Dialog</a>           
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div id="dialog" data-role="dialog">
        <div data-role="header">
            <h1>jQuery Mobile Dialog</h1>
        </div>
        <div data-role="content">
            Place content here
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    </body>
</html>

＆＃13;

jQuery Mobile：打开带有动态内容的对话框

2 个答案: