Question

我有一个跨多个页面的常见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）;

我可以看到更新的内容，但是当我打开pupup时，我仍然可以看到较旧的内容。请让我知道如何刷新弹出窗口中的内容

JS小提琴：http://jsfiddle.net/bhavik89/49QwL/1/

在小提琴中我只能看到初始内容，它们在更新时不会刷新

Answer 1

不要将弹出窗口放在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");       
   });    
});

这是一个有效的 DEMO

jQuery Mobile popup动态内容不会刷新

1 个答案: