我正在使用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();
提前致谢
答案 0 :(得分: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
答案 1 :(得分:-1)
我认为解决此问题的最正确方法是:
您不应动态创建对话框。
只需更新对话框内容,比这项工作更简单: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);
&#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;