1

这是我的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()事件，而该事件不应该被调用。我怎样才能防止这种情况？

4

2 回答 2

0

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

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

$(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) { ...

使其与动态添加和删除的类一起使用。

于 2013-10-04T12:50:39.633 回答
0

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

于 2013-10-04T12:54:44.670 回答