javascript - 追加Jquery后点击事件

Question

我正在尝试一些 Jquery、json 和 Ajax。

如果 fa-plus 被点击，它需要消失，而 fa-mines 需要显示。 问题是它什么也没做。甚至不是 console.log('clicked')

我已准备好文档:$(document).on('click', '.open', function() {}

我在这里迷路了..希望你们能帮忙。

$(document).ready(function(){
    Cocktail.getAll().done(function(data){
        var list = $('.list-group');

        for (var i = 0; i < data.cocktails.length; i++) {
            list.append('<li class="list-group-item"><h3>' + data.cocktails[i].name + '</h3><i class="fa fa-plus"><i class="fa fa-minus hide"></i>');
        }

    }).fail(function(data){
        console.warn('fetching failed');
        console.warn(data);
    }).always(function(){
        console.log('this is what I always do');
    });


    var open = $('.fa-plus');
    var close = $('.fa-minus');

    $(document).on('click', '.open', function() {
        console.log('clicked');
        $(this).addClass('hide');
        close.removeClass('hide');

    });
});

Answer 1

无需维护两个元素，只需更新单个元素上的类即可。那么你不需要显示/隐藏。

$(document).on('click', '.fa', function() {
  $(this).toggleClass("fa-plus fa-minus");
});