jQuery移动弹出动态内容不刷新

jQuery Mobile popup dynamic contents are not refreshed

本文关键字：刷新 动态 移动 jQuery      更新时间：2023-09-26

我有一个跨多个页面的通用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("Common Inner Html: " + document.getElementById(' Common -popup').innerHTML);

我可以看到更新的内容，但是当我打开小狗，我仍然看到旧的内容。请告诉我如何刷新弹出窗口的内容

JS Fiddle: http://jsfiddle.net/bhavik89/49QwL/1/

在Fiddle中，我只能看到初始内容，它们不会在更新

时刷新。

与其把弹出框放在div中，不如把它放在body下面。然后，当重新创建它时，将顶层的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");       
   });    
});

这是一个工作的DEMO

相关文章：