jQueryのイベントハンドラーをイベント発動後に無効化する
以下のようにクリックイベントを2つ設定して、do 1の方で特定の条件を満たした場合、do 2をキャンセルしたいのですが上手くいきません。
$(".foo").click(function(event){
// do 1
});
$(".foo").click(function(event){
// do 2
});
do 1側では preventDefault()、$(this).off("click")、return false を試してみましたが、イベント発動済みなせいか do 2 を止めることはできませんでした。
実際に何がしたいかというと、jQueryUIのダイアログを使って以下のような削除確認ダイアログを実装しています。
base.js
$(function(){
deleteConfirmation = $("<div>").append("<p>Are you sure you want to delete it?</p>").dialog({
modal: true,
autoOpen: false,
title: "Confirmation",
buttons: {
"Yes": function(event) {
$.data(deleteConfirmation, "target").click();
$(this).dialog("close");
},
"No": function(event) {
$(this).dialog("close");
}
},
close: function() {
$.data(deleteConfirmation, "target", null);
}
});
$(".delete-confirm").click(function(event){
var target = $.data(deleteConfirmation, "target");
if (target == null) {
$.data(deleteConfirmation, "target", $(this));
deleteConfirmation.dialog("open");
return false;
}
});
});
上記により、delete-confirm クラスを指定した要素のクリック時に確認ダイアログが表示され、ダイアログでYESを押した場合のみ本来のクリックイベントが実行されます。
しかし、確認ダイアログを設定した要素に対して、さらに別のclickイベントハンドラーを設定した場合、確認ダイアログ側のハンドラーで return false しても追加したハンドラーがキャンセルされなくて困っています。
例えば以下の様な場合です。
page.js
$(function(){
$("#submit-button").click(function(event){
// do submit
});
});
HTML
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="page.js"></script>
<button id="submit-button" class="delete-confirm">Submit</button>
何かいい回避策があれば教えてもらえませんか。