如何解决JQM DOM 缓存究竟何时清空?
我经常使用包含多个绑定的 JQM 刷新 DISTINCT ON (vp.id)
元素。每次刷新后,我都会看到 Chrome 中的听众有所增加。在某些时候,页面不再响应。
根据文档,<div>
在插入新内容之前替换(即调用 html()
)该 empty()
的所有相关元素(包括绑定),但是,这意味着侦听器不要增加。即使我使用 <div>
删除 <div>
元素并重新创建,侦听器的数量也不会减少。这是否与 DOM 缓存有关,可能没有被清空?我只有一个页面,据我所知,第一页总是被缓存。
我在这里监督什么?
我的主文档的简化版:
remove()
<!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
编辑:感谢您到目前为止的评论。我综合考虑了(我基本上把要替换的(内容)换成了页面-;重新运行性能监控时,没有看到重复的绑定,但是监听器还是增加了。请看下面的截图:
难道它实际上与 JQM 无关,而是一个 ajax“问题”?
在 rar 情况下,听众数量突然下降:
我怎样才能激怒后者?
解决方法
来自jQuery Mobile Documentation:
在 "page
" [...] 中,"page
" 的直接子级是 div
使用 data-role="header
"、class="ui-content
" 和 data-role="footer
"。
在您的项目中,您正在动态更新 content
,它比 page
低一级。您需要检查您动态附加到 widget
的类型,因为某些小部件需要将事件侦听器附加到上层 - content
- 以提供一些功能,例如- 例如 - tap-toggle 的 page
和 header
,或 活动状态 按钮的 footer
,或此外,用于滑动的 navbar
小部件等等。
您是否能够在开发者工具中识别重复的事件侦听器?
panel
示例:
让我们以 navbar
为例:JQM 团队打算将此小部件一次性附加到页面以提供页面之间的导航。如果您动态附加 navbar
,则清理父标记是不够的(这也正确地分离了直接附加的事件侦听器),但您还需要清理附加到页面的事件侦听器小部件创建。
为什么 navbar
小部件没有删除所有创建的事件侦听器?
我不是判断这是错误还是缺失功能的合适人选,一切都可以以更好的方式实现。如上所述,navbar
旨在仅在页面内插入一次以提供页面之间的导航。
动态 navbar
是否有修复?
对于事件侦听器问题,您可能需要像这样对 JQM 进行猴子补丁:
navbar
结果:
左: <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("")
事件侦听器。
所以,我坚信这不是 JQM 页面缓存问题。每个 page
都有自己的实现和行为。如果您只使用一个页面并动态更新内容,这很好,但是 - 取决于您从哪个小部件附加到页面内容中 - 您可能需要应用自定义清理或您可能需要更换小部件一些更简单的东西:例如,widget
按钮的一个很好的替代品是带有单选按钮的 navbar
。没有额外的未知功能,也无需特殊清理。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。