Нажмите событие после добавления JQuery

Question

Я играю с некоторыми Jquery, json и Ajax.

Если щелкнул fa-plus, он должен исчезнуть, а fa-mines нужно показать. проблема в том, что она ничего не делает. даже не 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"); 
});