навигация по истории html5: всплывающее окно не запускается, за исключением загрузки страницы

Question

Учитывая веб-приложение с навигацией ajax, вы намереваетесь использовать навигацию по истории html5.

Но: привязка к событию popstate не инициируется. За исключением загрузки страницы, когда это:

Если доступен HTML5 (он правильно обнаружен, демо-версии работают так же хорошо в Chrome, как и FF):

// Callback
function historyChangeHandler(data) {
    console.log(data);
}

// Bind
$(window).bind('popstate', historyChangeHandler);


// Trigger
$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    return false;
});

Что не работает:

• Всплывающий обратный вызов historyChangeHandler () НЕ вызывается при нажатии на ссылку. То есть нажатие печатается, но не событие.

Что я пробовал:

• Отложите вызов pushState с помощью setTimeout.
• e.preventDefault (); и вернуть true вместо false
• Также прикрепите к div-s и верните true

Что работает:

• historyChangeHandler () вызывается при загрузке страницы.
• historyChangeHandler () вызывается при нажатии кнопки назад.
• historyChangeHandler () вызывается при нажатии кнопки вперед.
• historyChangeHandler () при вызове history.pushState ({url: "/ test"}, "", "/ test") из консоли!

Какие-нибудь подсказки, которые я пропускаю?

Answer 1

popstate не должен вызываться при нажатии на ссылку.Он вызывается, когда пользователь перемещается с помощью кнопки «назад / вперед».

Все работает так, как он должен.

Answer 2

Зачем вам нужно событие popstate для запуска? Почему бы просто не вызвать вашу функцию?

$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    historyChangeHandler({url: url});
    return false;
});