防止触发JQuery的多次单击事件

Question

这是场景,我的内容是基于类异步加载的.因此,如果我有一个类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>

Answer 1

你试过了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();
        }
    });