當我返回頁面時，JQuery停止工作

我實現了一個腳本，該腳本在不刷新頁面的情況下加載另一個頁面，並且所有內容都按預期工作。但我有一個錯誤/問題：如果我嘗試從「index.html」到「about.html」頁面（例如）並返回到「index.html」，索引頁面上的jquery函數將隱藏<p></p>標籤之間的元素停止工作:( 任何人都知道爲什麼會這樣，最重要的是如何解決它當我返回頁面時，JQuery停止工作

這是我的索引頁：

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>PAGE1!</title> 
<script type="text/javascript" src="jquery.js"></script> 
<style type="text/css"> 
@import url(css.css); 
</style> 
<script type="text/javascript" src="js.js"></script> 

<script> 
$(document).ready(function(){ 
    $("p").click(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="wrapper"> 
    <h1>Test</h1> 
    <ul id="nav"> 
     <li><a href="index.html">welcome</a></li> 
     <li><a href="about.html">about</a></li> 
     <li><a href="portfolio.html">portfolio</a></li> 
     <li><a href="contact.html">contact</a></li> 
     <li><a href="terms.html">terms</a></li> 
    </ul> 
    <div id="content"> 
    <p>If you click on me, I will disappear.</p> 
    <p>Click me away!</p> 
    <p>Click me too!</p> 
</div> 

</body></html>

這是關於頁面：

<html> 
<head> 
<script src="jquery.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("p").click(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="content"> 
    <p>ABOUT HERE.</p> 

</div> 

</body> 
</html>

這是我的JS代碼，它不加載刷新頁面：

$(document).ready(function() { 

var hash = window.location.hash.substr(1); 
var href = $('#nav li a').each(function(){ 
    var href = $(this).attr('href'); 
    if(hash==href.substr(0,href.length-5)){ 
     var toLoad = hash+'.html #content'; 
     $('#content').load(toLoad) 
    }           
}); 

$('#nav li a').click(function(){ 

    var toLoad = $(this).attr('href')+' #content'; 
    $('#content').hide('fast',loadContent); 
    $('#load').remove(); 
    $('#wrapper').append('<span id="load">LOADING...</span>'); 
    $('#load').fadeIn('normal'); 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
    function loadContent() { 
     $('#content').load(toLoad,'',showNewContent()) 
    } 
    function showNewContent() { 
     $('#content').show('normal',hideLoader()); 
    } 
    function hideLoader() { 
     $('#load').fadeOut('normal'); 
    } 
    return false; 

});

}）;

在此先感謝，夥計們！

來源

2013-03-03 SpecTrum

它發生的原因是因爲jQuery函數不能用新的DOM元素工作，所以你需要使用on函數，假設你使用的是jQuery版本1.7以上，如果不是，你需要使用代替live函數。

更換

$(document).ready(function(){ 
    $("p").click(function(){ 
    $(this).hide(); 
    }); 
});

與

$(document).ready(function(){ 
    $("body").on("click", "p", function(){ 
    $(this).hide(); 
    }); 
});

或者，對於舊版本的jQuery：

$(document).ready(function(){ 
    $("p").live("click", function(){ 
     $(this).hide(); 
    }); 
});

或者，您也可以將該p隱藏功能在現有loadContent功能：

function loadContent() { 
    $('#content').load(toLoad,'',showNewContent()); 

    $("p").click(function(){ 
     $(this).hide(); 
    }); 
}

來源

2013-03-03 01:31:58 martincarlin87

哎呦，更新。我在'on'語法上總是生鏽 – martincarlin87 2013-03-03 01:41:36

我被替換並且函數停止工作:(幫助！ – SpecTrum 2013-03-03 01:42:07

@SpecTrum，我剛剛更新了我的答案，現在嘗試 – martincarlin87 2013-03-03 01:42:38

當我返回頁面時，JQuery停止工作

回答

相關問題