我有一个跨多个页面的通用 JQM 弹出窗口。在每个页面中，弹出窗口的内容都会使用页面中的数据进行刷新。第一次加载页面时，我可以在弹出窗口中看到刷新的内容。但是，当我将新数据加载到弹出 div 时，我仍然在弹出小部件上获取旧数据。
如果我检查弹出窗口的innerHTML，它会为我提供新内容，但在弹出窗口上看不到它们。
这是我的示例代码:
<body>
<div id="common-popup">
<div id="data-popup" data-role="popup">';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type='text' id='p1_name' value=''>Name: </input>
<input type='text' id='p1_dob' value=''>DOB: </input>
<button class="update-data" id="b1"/>
<a href="#data-popup"> Watch Data </a>
</div>
<div data-role="page" id="page2">
<input type='text' id='p2_name'>Name: </input>
<input type='text' id='p2_dob'>DOB: </input>
<button class="update-data" id="b2"/>
<a href="#data-popup"> Watch Data </a>
</div>
</body>
<script type="text/javascript">
$('.update-data').on('vclick', function(){
var id = $(this).id;
id = id.split('');
var htm = '<div id="data-popup" data-role="popup">';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
$('#common-popup').html(htm).trigger('create');
});
</script>
在上面的代码中，如果我使用以下命令检查innerHTML:
console.log("通用内部Html:"+ document.getElementById('common-popup').innerHTML);
我可以看到更新的内容，但是当我打开小狗时，我仍然看到旧的内容。请告诉我如何刷新弹出窗口的内容
JS fiddle :http://jsfiddle.net/bhavik89/49QwL/1/
在Fiddle中我只能看到初始内容，更新时不会刷新
最佳答案
不要将弹出窗口放在 DIV 中，只需将其放在正文下方即可。然后在重新创建它时，将顶级 DIV 保留在那里并仅替换内容:
<div id="data-popup" data-role="popup" data-theme="a" >
<div >
<p>Name: N/A</p>
<p>DOB: N/A </p>
</div>
</div>
确保您的链接具有 data-rel="popup":
<a href="#data-popup" data-rel="popup"> Watch Data </a>
为您的更新按钮提供一些文本，以便我们可以看到该按钮:
<button class="update-data" id="b1" >Update</button>
完成此操作后，在文档准备就绪时初始化弹出窗口，然后单击更新按钮，替换弹出窗口 HTML，调用enhanceWithin()，最后调用 popup("refresh") 来更新弹出窗口小部件:
$(function(){
$("#data-popup").enhanceWithin().popup();
});
$(document).on("pagecreate", "#page1", function(){
$('.update-data').on('vclick', function(){
var id = $(this).prop("id");
id = id.split('');
var htm = '<div>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>DOB: ' + $('#p' + id[1] + '_dob').val() +'<p>';
htm += '</div>';
$("#data-popup").html(htm).enhanceWithin().popup("refresh");
});
});
Here is a working DEMO
关于javascript - jQuery Mobile 弹出动态内容不刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25106396/