当我返回页面时，jQuery停止工作

Question

我实现了一个脚本，该脚本可以加载另一个页面而不刷新页面，并且一切正常。 但是我有一个错误/问题：如果尝试从“ index.html”页面转到“ about.html”页面（例如），然后返回“ index.html”页面，则索引页面上的jquery函数会隐藏<p></p>标记之间的元素停止工作:(任何人都知道为什么会发生这种情况，最重要的是如何解决它？

这是我的索引页：

<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;

});

}）;

预先感谢，伙计们！

Answer 1

发生这种情况的原因是，由于jQuery函数无法与新的DOM元素配合使用，因此，假设您使用的是jQuery> 1.7版本，则需要使用on函数，否则请使用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();
    });
}

当我返回页面时，jQuery停止工作

问题描述

1 个解决方案

解决方案1
1 2013-03-03 01:31:58

当我返回页面时，jQuery停止工作

问题描述

1 个解决方案

解决方案1 1 2013-03-03 01:31:58

解决方案1
1 2013-03-03 01:31:58