Ajaxページ遷移の制御ではまったのでメモ -bindとdelegateの違い-
はじめまして。ICtriumphsに入社してまだ3ヶ月目の浅野です。
今現在、PhoneGapを使ったアプリを作成中なのですが、リンクが押されたらclickイベントのコールバック関数を呼び出して条件に合わなかったらページ遷移を中断したいと思い、
$(function(){
$(document).delegate("#button", "click", function(event) {
alert("alert!");
return false;
});
});
のようにdelegateを使って実装したのですが、alertを発した後に何事もなかったようにページ遷移してしまいます。。
しかし、以下のようにすることで見事alertを発した後にページ遷移は発生しないようになりました！
$(function(){
$("#button").click(function(event) {
alert("alert!");
return false;
});
});
原因としてはclick（.bindのshortcut）の場合は<a>タグのブラウザデフォルトの動作が実行される前に、コールバック関数が呼ばれ、falseを返すことでデフォルトの動作は呼ばれずに処理が停止しますが、
delegateの場合は、クリックイベントがdocument要素までバブリングした段階で callback が実行されているので、<a>タグをクリックした時のブラウザのデフォルト動作は既に実行された状態となっています。
要は後の祭り状態だったということでした。
- TAG：
- JavaScript｜jQuery
