Question

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

我正在使用表单提交功能中更新的JSON更新弹出窗口的内容。我面临的问题是刷新表单提交上的弹出内容。我必须重新启动APP以查看弹出窗口的更改。

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

此外，即使我在提交函数中使用$（'＃popup-div'）。empty（）将popup 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>

Answer 1

这是工作演示

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

JS Fiddle Demo

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

在常见的弹出式jQuery mobile上刷新动态内容

1 个答案: