Question

这是我的jquery代码：

$(function () {
    $('.gridster li.gs-closed').on('click', function () {
        var ulCurrentHgt = $('.gridster ul').height();
        var ulNewHgt = ulCurrentHgt + 409;
        $('.gridster > ul').height(ulNewHgt);
        $(this).find('form').slideDown();
        $(this).removeClass('gs-closed').addClass('gs-openedx');
    });

    $(document).on('click', "li.gs-opened", function () {
        var ulCurrentHgt = $('.gridster ul').height();
        var ulNewHgt = ulCurrentHgt - 409;
        $('.gridster > ul').height(ulNewHgt);

        $(this).find('form').slideUp();
        $(this).removeClass('gs-opened').addClass('gs-closed');
    });
})

这是html：

正如您在点击li.gs-closed时看到的那样，我正在添加课程gs-opened。后来我为gs-opened类提供了一些其他点击处理程序。但是，当我点击li.gs-closed时，它会添加类gs-opened并调用$(document).on('click', "li.gs-opened", function()事件，该事件不应该被调用。我该如何防止这种情况？

Answer 1

更改类不会删除已绑定到元素的事件处理程序。

您真正需要做的是附加一个单独的事件处理程序，并在该处理程序中创建某种切换功能：

$(function () {
    $('.gridster li').on('click', function () {
        var ulCurrentHgt = $('.gridster ul').height(),
            open         = $(this).data('open'),
            added        = open ? -409 : 409,
            ulNewHgt     = ulCurrentHgt + (added);

        $('.gridster > ul').height(ulNewHgt);
        $(this).find('form')[open ? 'slideUp':'slideDown']();

        $(this).data('open', !open);
    });
});

您还可以委派第一个事件处理程序：

$(document).on('click', "li.gs-closed", function (event) { ...

使其适用于动态添加和删除的类。

Answer 2

我建议使用单独的类来附加事件。因为删除类不会删除该元素上已经附加的事件。您可以使用标志来决定要添加和删除的类。

使用jquery阻止为添加的类调用事件

2 个答案: