通过AJAX和列切换的JQuery Mobile更新表停止工作

我正在使用JQM 1.4.2创建一个小应用程序，我遇到了一个问题，我在使用ajax更新没有页面刷新的表。 这很好用，我的表（整个表）更新但是在更新后， data-mode='columntoggle'不再有效 – 按钮就在那里，但你对显示列所做的任何选择根本不再有效。

任何人都可以想到为什么会发生这种情况的原因？ 代码如下：

主页

  
 
  
  
 
 
Visual Check
 
 
 
  
 
 
 
 

表页面（香港专业教育学院从这里删除了一堆PHP，以方便阅读！）：

  echo"
 
 
 
Unit No.
 
Size Code
 
Size
 
Week Rate
 
Month Rate
 
Overlocked
 
Visual Check
 
Status
 
 
 
 
 
" . $row['unitno'] . "
 
" . $row['sizecode'] . "
 
" . $row['usize'] . "
 
" . $row['wrate'] . "
 
" . $row['mrate'] . "
 
" . $row['overlocked'] . "
 
" . $row['visual'] . "
 
" . $row['description'] . "
 
" . $row['unitno'] . "
 
 
  

单击编辑按钮以打开一个弹出窗口，当您关闭重新写入包含更新信息的表时。 ajax重新加载表而不刷新整个页面：

  function LoadVisualUnitTable() { $.post('unit_DisplayVisualTable.php', 'unitSearchBox=&choiceUnitSearch=&choiceDeletedUnit=&selectSiteUnit=&choiceUnitSearchCri=&selectUnitStatus=&sid=RI201310111345581600', function(data) { $("#visualUnitTable").html(data); // $("#visualUnitTable").trigger('create'); // }); return false; }; 

我在想，也许我需要一行一行地重新加载 – 对此有何想法？ 否则任何想法将不胜感激！ 谢谢

Answer 1

看起来jQM使弹出窗口保留了表的第一次加载时的列列表，因此在后续加载后它不会重新创建列表。 可能有更“官方”的方法来实现这一点，但一个快速的解决方法是每次刷新表时从DOM中删除动态弹出窗口：

 $("#visualUnitListTable-popup-popup").remove(); $("#visualUnitTable").html(data).enhanceWithin(); 

给定您的visualUnitListTable的表id，jQM创建一个id为visualUnitListTable-popup-popup ，因此您可以在更新表HTML之前调用该元素上的remove（）。

这是一个DEMO