如何在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