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

【问题标题】：jQuery Mobile: open dialog with dynamic contentjQuery Mobile：打开带有动态内容的对话框
【发布时间】：2014-07-07 16:51:30
【问题描述】：

我正在使用 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();

提前致谢

【问题讨论】：

您使用的jQM 的版本号会有所帮助。加上你的代码的其余部分，或者更好的是，一个 jsfiddle。

标签： jquery jquery-mobile dialog

【解决方案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

【讨论】：

似乎无法更改页面过渡效果：jsfiddle.net/Lx82g/4
简单，$(":mobile-pagecontainer").pagecontainer("change", "#dialog", {transition: "flow"});更新小提琴：jsfiddle.net/ezanker/Lx82g/5

【解决方案2】：

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

您不应该动态创建对话框。

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

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

$('#show').click(update_dialog_content);

<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>

【讨论】：