navigate

このエントリーをはてなブックマークに追加

navigateイベントはhashchangeイベントやpopstateイベントを感知して発火するイベントです。

次のようなHTMLがあったとします。

<a href="#hashchange1" data-ajax="false">hashchange1</a>
<a href="#hashchange2" data-ajax="false">hashchange2</a>
<a href="./pushstate1.html" class="pushstate" data-ajax="false">pushstate1</a>
<a href="./pushstate2.html" class="pushstate"data-ajax="false">pushstate2</a>

class=”pushstate”のa要素に関してはJavaScriptのhistory.pushState()で新しいURLを発行するようにしています。

次のようにwindowオブジェクトにnavigateイベントを指定することで、hashchangeイベントが発行されたタイミングや、戻るボタンが押されpopstateイベントが発行されたタイミングでnavigateイベントに指定したイベントハンドラーが実行されます。

$(function() {
	$(".pushstate").click(function(){
		history.pushState({},"",$(this).attr("href"));
		return false;
	});
	$(window).on("navigate",function(event) {
		alert("ok")
	});
});

sample

jQuery Mobile 1.3.0での追加/変更

navigateイベントはjQuery Mobile 1.3.0で追加されたイベントです。

参考URL

navigate | jQuery Mobile API Documentation

登録日 : 2013年04月09日 最終更新日 : 2016年12月19日

同じカテゴリー(イベント)のエントリー

検索

スポンサードリンク

バージョン

リファレンス