Я столкнулся с некоторыми проблемами, когда пытался воссоздать демо с сайта http://html5.gingerhost.com/. Постараюсь максимально понятно описать ситуацию:
На моей странице есть ‹ href="index">, который при нажатии вызывает:
- событие pushState, которое меняет адресную строку браузера на mysite.tld/index
- вызов getJSON, который загружает случайный URL-адрес и ставит его вместо текущего ‹ a href="index">
Когда пользователь щелкает загруженный случайный URL-адрес, событие pushState не срабатывает, и браузер следует случайному URL-адресу... чего я не хочу. Я хочу продолжать вызывать событие pushState и продолжать загружать случайные URL-адреса.
Что-то вроде этого:
- CLICK INDEX
- LOAD INDEX2 and REPLACE INDEX
- CLICK INDEX2 (here it breaks. it loads the real page)
- LOAD INDEX3 and REPLACE INDEX2 (here I want to arrive)
- CLICK INDEX2 (here it breaks. it loads the real page)
- LOAD INDEX2 and REPLACE INDEX
Прошу прощения, если я не ясен. Я не очень уверен в своих навыках jQuery.
У Вас есть какие-то предложения?
Вот исходный код:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function(e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
});
function loadContent(url){
$.getJSON("load.php", {pid: url}, function(json) {
$.each(json, function(key, value){
$(key).html(value);
});
});
}
</script>
</head>
<body>
<div>
<a href="index">Go to: index</a>
</div>
<p></p>
</body>
</html>
load.php
<?php $i = rand(0,10); ?>
{
"div":"<a href='<?php echo $_GET['pid'].$i; ?>'>Go to: <?php echo $_GET['pid'].$i; ?></a>",
"p":"This is the page for <?php echo $_GET['pid']; ?>"
}
