追加Jquery后的Click事件

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