Question

我希望在单击按钮后更改状态的多个元素。为了实现这一点，我尝试使用jQuery函数click（）（我也尝试了.on（'click'）版本）。出于某种原因，虽然它只运行第一个函数而不是下一个函数。我100％确定解决方案是完全明显的，但我根本无法想出任何解决方案。我在其他项目中使用了完全相同的方法并且它曾经工作正常，但现在我看不出任何差异，但它仍然不会按预期工作。

HTML

    <div class="button-open">ASDFG</div>

CSS

    .button-open{
        width:50px;
        height:50px;
        background-color:red;
    }

    .button-close{
        width:50px;
        height:50px;
        background-color:blue;
    }

JS

    $('.button-open').click(function(){

        $(this).removeClass('button-open').addClass('button-close');

    });

    $('.button-close').click(function(){

        $(this).removeClass('button-close').addClass('button-open');

    });

JS小提琴：http://jsfiddle.net/AbH85/

我很感激任何帮助。

Answer 1

您需要使用event delegation。

$(document).on('click', '.button-open', function () {
    $(this).removeClass('button-open').addClass('button-close');
});

$(document).on('click', '.button-close', function () {
    $(this).removeClass('button-close').addClass('button-open');
});

演示：Fiddle

但它可以简化为

$(document).on('click', '.button-open, .button-close', function () {
    $(this).toggleClass('button-open button-close');
});

演示：Fiddle

当您使用普通选择器注册事件处理程序时，会将这些事件处理程序添加到目标元素，因此在事件注册后对元素属性所做的任何更改都不会影响已注册的处理程序。使用事件委托时，动态评估选择器。

jQuery只有第一个单击功能才有效

1 个答案: