追加Jquery後點擊事件

Question

我在玩Jquery，json和Ajax。

如果fa-plus被點擊，它需要消失並且需要顯示人臉。 問題是它沒有做任何事情。甚至沒有的console.log（「點擊」）

我有文件準備和：$(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"); 
});