web-dev-qa-db-ja.com

JQueryを起動する複数のクリックイベントを防ぐ

シナリオは次のとおりです。私のコンテンツはクラスに基づいて非同期にロードされます。クラスajaxLinkとのリンクがある場合、以下のように起動します。

_$('a.ajaxLink').click(function (e) {
        e.preventDefault();
        var container = $(this).parents('div.fullBottomContent');
        var href = $(this).attr('href');
        container.fadeOut('fast', function () {
            $.ajax({
                url: href,
                dataType: "html",
                type: "GET",
                success: function (data) {
                    container.html(data);
                    BindEventHandlers();
                    container.fadeIn();
                    $.validator.unobtrusive.parse('form');
                },
                error: function () {
                    alert('An error has occurred');
                }
            });
        });

    });
_

すべて素敵です。あるインスタンスでは、ユーザーにページをロードしてすべての変更を失いたいというconfirmへの警告を表示したいので、これを書きました：

_$('a.addANewHotel').click(function (e) {
        if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
            e.stopPropagation();
        }
    });
_

今私は_return false_、e.preventDefault()およびe.stopPropagation();を試しましたが、最初のメソッドが常に起動されるかどうかに関係なく？追加のクリックイベントが発生しないようにするにはどうすればよいですか？これはイベントの順序ですか？

これがどのように関連しているかはわかりませんが、私のHTMLは次のとおりです。

_<a style="" href="/CMS/CreateANewHotel?regionID=3&amp;destinationID=1&amp;countryName=Australia" class="button wideBorderlessButton ajaxLink addANewHotel">Add a new hotel</a>
_
jqueryconfirm
22
Liam

やってみました： event.stopImmediatePropagation？

私はそれがあなたが探しているものだと信じています：

http://api.jquery.com/event.stopImmediatePropagation/

$('a.addANewHotel').click(function (e) {
        if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
            e.stopImmediatePropagation();
            e.preventDefault();
        }
    });
37
bstakes

stopPropagationは、イベントが親要素にバブリングするのを停止しますが、同じ要素の他のクリックハンドラーが起動するのを妨げません。したがって、ソリューションは機能しません。

たとえば、次のようにできます。

$('a.ajaxLink').click(function (e) {
    e.preventDefault();

    if($(this).hasClass("a.addANewHotel") &&
           !confirm('Adding a new hotel will loose any unsaved changes, continue?')){
        return false;
    }

    var container = $(this).parents('div.fullBottomContent');
    var href = $(this).attr('href');
    container.fadeOut('fast', function () {
        $.ajax({
            url: href,
            dataType: "html",
            type: "GET",
            success: function (data) {
                container.html(data);
                BindEventHandlers();
                container.fadeIn();
                $.validator.unobtrusive.parse('form');
            },
            error: function () {
                alert('An error has occurred');
            }
        });
    });

});

さまざまな種類のリンクがある場合は、共通のコードを関数に入れ、差別化クラスを使用してハンドラーをバインドする必要があります。これらのハンドラーは、必要に応じて共通コードを呼び出すことができます。

2
Asciiom