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(); 
    }); 
});

В качестве альтернативы, вы можете также поместить функцию р пряча в существующей loadContent функции :

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

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

источник

2013-03-03 01:31:58 martincarlin87

кричит, обновляется. Я всегда ржавый на синтаксисе 'on' – martincarlin87

Я заменил и функция перестала работать :(Help! – SpecTrum

@SpecTrum, я только что обновил свой ответ, попробуйте сейчас. – martincarlin87

JQuery перестает работать, когда я возвращаюсь на страницу

ответ

Смежные вопросы