20650


以下のようにクリックイベントを2つ設定して、do 1の方で特定の条件を満たした場合、do 2をキャンセルしたいのですが上手くいきません。

[code]

    $(".foo").click(function(event){
        // do 1
    });
    $(".foo").click(function(event){
        // do 2
    });
    
[/code]

do 1側では preventDefault()、$(this).off("click")、return false
を試してみましたが、イベント発動済みなせいか do 2 を止めることはできませんでした。

実際に何がしたいかというと、jQueryUIのダイアログを使って以下のような削除確認ダイアログを実装しています。

## base.js

[code]

    $(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;
            }
        });
    });
    
[/code]

上記により、delete-confirm
クラスを指定した要素のクリック時に確認ダイアログが表示され、ダイアログでYESを押した場合のみ本来のクリックイベントが実行されます。

しかし、確認ダイアログを設定した要素に対して、さらに別のclickイベントハンドラーを設定した場合、確認ダイアログ側のハンドラーで return false
しても追加したハンドラーがキャンセルされなくて困っています。

例えば以下の様な場合です。

## page.js

[code]

    $(function(){
        $("#submit-button").click(function(event){
            // do submit
        });
    });
    
[/code]

## HTML

[code]

    <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>
    
[/code]

何かいい回避策があれば教えてもらえませんか。


CC BY-SA 3.0
2016-01-06T03:26:50.670
20645
2016-01-06T07:22:32.220
8148
question
jquery
jQueryのイベントハンドラーをイベント発動後に無効化する


実際に試していませんが、  
[event.stopImmediatePropagation()](http://js.studio-
kingdom.com/jquery/events/event_stop_immediate_propagation)

> このメソッドが実行された以降のイベントハンドラを全てキャンセルし、合わせてDOMツリーのイベント伝搬もキャンセルします。

が使用出来るのではないかと思います。


CC BY-SA 3.0
2016-01-06T05:53:22.167
20650
2016-01-06T05:53:22.167
5044
20645
answer