Question

我有一个由jQuery mobile中的各种html页面组成的网站。在一个页面上，我在内容中有一个javascript函数。转到另一个页面时，此功能仍然存在。如何在显示下一页之前将其删除？

我使用以下内容删除了上一页的dom元素，但上一页的javascript函数仍然可用。

$('div').live('pageshow',function(event, ui) {
    $(ui.prevPage).remove();
});
$('div').live('pagehide', function(event) {
    $(event.target).remove();
});

这是两页的完整代码。从第1页到第2页单击时，仅在第1页上的函数testContent仍然有效。

第1页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
    $(ui.prevPage).remove();
    doPageShow();
});
$('div').live('pagehide', function(event) {
    $(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 1z</h1>
<a href="page2.html">Page 2</a>
<div id="test"></div><!-- this div should be removed upon going to the next page -->
<script>
function testContent() {
    // this function still exists on the next page, how can it be removed?
    alert("testContent");
}
function doPageShow() {
    alert("Page 1");
    alert($("#test").length); // shows 1 which is correct
    testContent(); // function is on this page, so it works
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>

第2页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
    $(ui.prevPage).remove();
    doPageShow();
});
$('div').live('pagehide', function(event) {
    $(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 2</h1>
<a href="page1.html">Page 1</a>
<script>
function doPageShow() {
    alert("Page 2");
    alert($("#test").length); // shows 0 which is correct
    testContent(); // why does this still work???
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>

Answer 1

Javascript对象一直有效，直到页面刷新为止。这是jquery mobile的优点之一，因为解析JS在移动设备上需要花费很长时间，所以最好这样做一次。

如果你真的需要，可以将函数设置为null。

Answer 2

我想我想出来了。基本上在JavaScript中，函数只是另一个对象，如：

doPageShow = function（）{...}

javascript中设置的所有东西都会在后续的ajax加载页面上保留，所以如果我在一个页面中设置一个变量，它仍然会在另一个加载了ajax的页面中包含该值，包括函数。

如何删除jQuery Mobile上一页中的javascript函数？

2 个答案: