刷新常见弹出jQuery mobile上的动态内容答案

【问题标题】：refresh dynamic contents on common popup jQuery mobile刷新常见弹出jQuery mobile上的动态内容
【发布时间】：2014-09-25 22:20:18
【问题描述】：

我正在开发一个 Web 应用程序，我有一个 Common 弹出窗口作为的直接子级，它包含几个从 JSON 动态创建的弹出窗口。有两个单独的页面具有用户输入表单。使用表单数据更新 JSON 文件。

我正在使用表单提交功能中更新的 JSON 更新弹出窗口的内容。我面临刷新表单提交时弹出内容的问题。需要重启APP才能看到弹窗的变化。

我尝试在表单提交功能的弹出窗口上触发“刷新”和“创建”事件，但仍然没有结果。

此外，即使我在提交函数中使用 $('#popup-div').empty() 将弹出 div 的内容设置为空，我仍然可以看到弹出窗口。不知道是不是缓存问题。

请指教解决方法，谢谢

示例代码：

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

【问题讨论】：

请向我们展示您的代码。更好的是，创建一个重现问题的 jsFiddle。
@ezanker 添加了示例代码。
jsfiddle.net/ezanker/7HVGR
@ezanker 感谢您的提琴，但是当您多次更新时它不会刷新弹出内容。它只是显示您第一次输入的内容。

标签： android jquery jquery-mobile web-applications popup

【解决方案1】：

这是工作演示

$( "#common-popup #data-popup") .enhanceWithin().popup() .on('popupafterclose', function(event) { $(this).remove(); });

JS Fiddle Demo

创建的动态弹出窗口应在关闭后删除。一次又一次地创建它会产生多个弹出窗口..但您仍然指的是第一个，这造成了问题。

【讨论】：