JQM DOM 缓存究竟是什么时候清空的？答案

【问题标题】：When exactly is JQM DOM cache emptied?JQM DOM 缓存究竟是什么时候清空的？
【发布时间】：2021-04-04 12:14:08
【问题描述】：

我经常使用 JQM 刷新 <div> 元素，其中包含多个绑定。每次刷新后，我都会看到 Chrome 中的侦听器有所增加。在某些时候，页面不再响应。

根据文档，html() 在插入新内容之前替换（即调用empty()）该<div>（包括绑定）的所有相关元素，但是，这意味着听众不会增加。即使我使用remove() 删除<div> 元素并重新创建，听众的数量也不会减少。这是否与DOM缓存有关，可能没有被清空？我只有一个页面，据我所知，第一页总是被缓存。

我在这里监督什么？

我的主文档的简化版：

 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="jquery.mobile-1.4.5/jquery-2.1.0.js"></script>
    <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
    $(document).on("pagecreate", function( event ) {
 
    var interval;
    setRefreshTime();
 
    function setRefreshTime() {
        interval = setTimeout(function () { refresh(); }, 10000);
    }
 
    function refresh() {
        clearTimeout(interval);
        $.ajax({
            type: "GET",
            url: "content.php",
            success: function(data) {
                $("#content").html(data);
                $("#content").enhanceWithin();
                setRefreshTime();
             }
        });
    }
    
 
    $("#page").on("click", ".function_A", function(){
        refresh();
    });
    
    $("#page").on("click", ".function_B", function(){
        refresh();
    });
    
    });
 
 </script>
 </head>
 <body>
 <div data-role="page" id="page">
    <div role="main" class="ui-content">
        <div id="content"><?php include("content.php");?></div>
    </div>
 </div>
 </body>
 </html>

content.php 被加载：

 <ul data-role="listview" data-inset="true" data-divider-theme="a">
    <li data-role="list-divider">Title A</li>
    <li data-role="list-divider">Title B</li>
        <div class="ui-grid-a">
            <div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all function_A" >Button A</a></div>
            <div class="ui-block-b"><a href="#" class="ui-shadow ui-btn ui-corner-all function_B" >Button B</a></div>
        </div>
 </ul>

编辑：感谢到目前为止的 cmets。我把所有的东西都考虑进去了（我基本上把要替换的（内容）换成了page-；重新运行性能监控时，我没有看到重复的绑定，但仍然增加了监听器。请找到下面的截图：

难道它实际上与 JQM 无关，而是一个 ajax“问题”？

在rar情况下，听众数量突然下降：

如何招惹后者？

【问题讨论】：

这只是在黑暗中的一个镜头，但这对你有用吗？ stackoverflow.com/a/14519319/3825777
谢谢，不幸的是没有成功...在当前版本中没有任何关于缓存的选项。我试图关闭ajaxEnabled（因为我并没有真正使用默认的JQM ajax），但是，根本没有任何变化。

标签： javascript jquery jquery-mobile

【解决方案1】：

来自jQuery Mobile Documentation：

在“page”[...] 中，“page”的直接子代是 div 使用 data-role="header"、class="ui-content" 和 data-role="footer"。

在您的项目中，您正在动态更新content，它比page 低一级。您需要检查哪种widget 您是动态附加到content，因为某些小部件需要将事件侦听器附加到上层 - page - 以提供一些功能，例如 - 例如 - @ 987654334@ 和footer 用于点击切换，或navbar 用于活动状态 按钮，或者还有panel 用于滑动的小部件，等等开。

您能否在开发者工具中识别出重复的事件监听器？

navbar 示例：

让我们以navbar 为例：JQM 团队打算将此小部件一次性附加到页面以提供页面之间的导航。如果您动态附加navbar，则清理父标记是不够的（这也正确地分离了直接附加的事件侦听器），但您还需要在小部件期间清理附加到页面的事件侦听器创作。

为什么 navbar 小部件不会删除所有创建的事件侦听器？

我不是判断这是错误还是缺少功能的合适人选，一切都可以以更好的方式实现。如前所述，navbar 旨在在页面内插入一次以提供页面间导航。

动态navbar 有修复方法吗？

对于事件监听器问题，您可能需要像这样对 JQM 进行猴子补丁：

<script src="js/jquery-2.2.4.js"></script>
<script>
    $(document).on("mobileinit", function () {
        $.widget("mobile.navbar", $.mobile.navbar, {
            _destroy: function() {
                var $navbar = this.element;
                $navbar.closest(".ui-page").off("pagebeforeshow");
            }
        });
    });
</script>
<script src="js/jquery.mobile-1.4.5.js"></script>

结果：

左：page 事件侦听器，尽管有 content.empty() 或 content.html("") 调用。

右：应用了修补程序的page 事件侦听器。

所以，我坚信这不是 JQM 页面缓存问题。每个widget 都有自己的实现和行为。如果您只使用一个页面并动态更新内容，这很好，但是 - 根据您在页面内容中附加的小部件 - 您可能需要应用自定义清理或您可能需要替换小部件用一些更简单的东西：例如，navbar 按钮的一个很好的替代品是带有单选按钮的controlgroup。没有额外的未知功能，也不需要特别清理。

【讨论】：