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

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 个解决方案

解决方案1
1 已采纳 2013-12-05 16:32:39

解决方案2
0 2013-12-05 16:27:10

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-12-05 16:32:39

解决方案2 0 2013-12-05 16:27:10

解决方案1
1 已采纳 2013-12-05 16:32:39

解决方案2
0 2013-12-05 16:27:10