title: Click event after append Jquery
body: <p>I'm playing around with some Jquery, json and Ajax.</p>
  
  <p>If the fa-plus got clicked it needs to disappear and fa-mines needs to show.
  the problem is it doesn't do anything. not even the console.log('clicked')</p>
  
  <p>I've got document ready and: <code>$(document).on('click', '.open', function() {}</code></p>
  
  <p>I'm lost here.. hope you guys can help.</p>
  
  <pre><code>$(document).ready(function(){
      Cocktail.getAll().done(function(data){
          var list = $('.list-group');
  
          for (var i = 0; i &lt; data.cocktails.length; i++) {
              list.append('&lt;li class="list-group-item"&gt;&lt;h3&gt;' + data.cocktails[i].name + '&lt;/h3&gt;&lt;i class="fa fa-plus"&gt;&lt;i class="fa fa-minus hide"&gt;&lt;/i&gt;');
          }
  
      }).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');
  
      });
  });
  </code></pre>