25

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

2 回答 2

49

你有没有试过：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();
        }
    });
于 2012-10-03T12:53:31.750 回答
3

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');
            }
        });
    });

});

如果你有很多不同类型的链接，你应该把公共代码放在一个函数中，并使用区分类绑定处理程序。然后，这些处理程序可以在适当的时候调用公共代码。

于 2012-10-03T12:52:27.847 回答