comment attraper un changement d'état de l'événement une FOIS avec history.js?

J'ai un exemple de code ci-dessous où, si vous cliquez sur les liens, puis utilisez l'arrière et vers l'avant, chaque changement d'état sera plus grand et de plus en plus de visites sur le statechange de l'événement. À la place de celui que j'attends.

Liens:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>History start</title>
</head>
<body>
<h1>Headline</h1>
<hr>
<div id="menu">
<ul>
<li>
<a href="page-1">Page 1</a>
<div style="display:none;">
<h2>Page 1</h2>
<p>Content 1</p>
</div>
</li>
<li>
<a href="page-2">Page 2</a>
<div style="display:none;">
<h2>Page 2</h2>
<p>Content 2</p>
</div>
</li>
</ul>
</div>
<hr>
<div id="content">
<h2>Start page</h2>
<p>Paragraf</p>
</div>
<script src="external/jquery-1.6.2.min.js"></script>
<script>if ( typeof window.JSON === 'undefined' ) { console.log("Loaded json2"); document.write('<script src="external/json2.js"><\/script>'); }</script>
<script src="external/history.adapter.jquery.js"></script>
<script src="external/history.js"></script>
<script>
$(document).ready(function() {
History.enabled = true;
$('a').each(function() {
$(this).click(function(e) {
e.preventDefault();
var $link = $(e.target),
state = {'href': $link.attr('href'), 'title': $link.html()},
$div = $link.siblings('div'),
content = $div.html();
$('#content').html(content);
History.pushState(state, state.title, state.href);
return false;
});
});
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
//remove double hit on event
console.log(State);
});
});
</script>
</body>
</html>

OriginalL'auteur Alexander Morland | 2011-10-13

  1. 6

    C'est parce que vous êtes à l'appel de la pushState fonction lorsque vous chargez la page, ce qui provoque également un statechange. J'ai été dans une situation similaire et utilisé un mais un booléen avant mon pushStates donc je savais que je faisais une pushState. Il ressemble à ceci...

    historyBool = true;
History.Adapter.bind(window,'statechange',function(){ //Note: We are using statechange instead of popstate
var State = History.getState(); //Note: We are using History.getState() instead of event.state
//don't run our function when we do a pushState
if(historyBool){
historyBool = false;
tempFunction = new Function(State.data.ajaxRunFunction);
tempFunction();
}
historyBool = true;
});
historyBool = false;
historySet = {ajaxRunFunction: "upc('" + pageID + "','')"};
History.pushState(historySet,"","");

    OriginalL'auteur Jared

  2. 4

    Alors que non pertinents pour votre problème spécifique, j'ai eu un scénario où j'avais besoin de séparer le gestionnaire d'événements de l'Histoire de l'Adaptateur. Pour ce faire, vous pouvez séparer la "statechange" de l'événement à partir de la fenêtre, qui est ce que l'Histoire.Adaptateur lie lors de l'appel de l'Histoire.L'adaptateur.bind() :

    $(window).unbind('statechange.namespace');

    Vous pouvez ajouté un espace de noms à l'événement afin d'éviter l'annulation de la liaison d'autres sans rapport avec les gestionnaires d'événements comme ci-dessus, ou d'utiliser une fonction nommée pour séparer cette fonction en particulier.
    Pour utiliser le haut de l'espace de noms, vous devez lier le gestionnaire en utilisant le même espace de noms, c'est à dire

    History.Adapter.bind(window,'statechange.namespace',function(){...}
    Merci, j'ai essayé de trouver unbind fonction dans l'objet de la Carte :/

    OriginalL'auteur lvanzyl