title: Js appended button not working
body: <p>On my website you can add cards to your collection. When you have clicked on the plus JS removes the plus button and inserts the minus button. The minus button is now visible but not working. I've read some articles about the new appended button not being clickable because the button didn't exist when the page was first loaded. Hence also when I reload the page the minus is working fine.</p>
  
  <p>here's my code:</p>
  
  <p>HTML</p>
  
  <pre><code>echo '&lt;li class="card addcards" id="card_' . $card["id"] . '"&gt;';
  echo '&lt;div class="status addtocol_btn addtocol_card_'.$card['id'].'" id="'.$card['id'].'"&gt;&lt;span id="addtocol_'.$card['id'].'"&gt;'.$col_id.'&lt;/span&gt;+&lt;/div&gt;';
  echo '&lt;/li&gt;';
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// AJAX ADD CARD TO COLLECTION ON SEARCHPAGE
  $(document).ready(function(){
      $(".addtocol_btn").click(function(){
          var card_id = $(this).attr('id');
          var col_id = document.getElementById('addtocol_'+card_id).innerHTML;
          $.ajax({
              url: ""+homelink+"/addtocol.php", 
              method: "POST",
              data:{'card_id':card_id, 'col_id':col_id},
              success: function(result){
                  $('div[id="' + card_id + '"]').fadeOut();
               $('#card_'+card_id+'').append('&lt;div class="status del_btn del_btn_card_'+card_id+'" id="'+card_id+'"&gt;&lt;span id="removefromcol_'+card_id+'"&gt;'+col_id+'&lt;/span&gt;-&lt;/div&gt;');              
          }});
      });
  });
  
  // AJAX REMOVE CARD FROM COLLECTION ON SEARCHPAGE
  $(document).ready(function(){
      $(".del_btn").click(function(){
          var card_id = $(this).attr('id');
          var col_id = document.getElementById('removefromcol_'+card_id).innerHTML;
          //if (confirm("Are you sure you want to remove this card from your collection?")) {
          $.ajax({
              url: ""+homelink+"/delete_card.php", 
              method: "POST",
              data:{'card_id':card_id, 'col_id':col_id},
              success: function(result){
               $('div[id="' + card_id + '"]').fadeOut();
               $('#card_'+card_id+'').append('&lt;div class="status addtocol_btn addtocol_card_'+card_id+'" id="'+card_id+'"&gt;&lt;span id="addtocol_'+card_id+'"&gt;'+col_id+'&lt;/span&gt;+&lt;/div&gt;');
          }});
          //}
      });
  });
  </code></pre>
  
  <p>I've checked with the Jquery manual: <a href="http://learn.jquery.com/events/event-delegation/" rel="nofollow">http://learn.jquery.com/events/event-delegation/</a> and aplied the there shown code but that just breaks my entire add/remove code:</p>
  
  <pre><code>// AJAX ADD CARD TO COLLECTION ON SEARCHPAGE
  //$(document).ready(function(){
      $(".card").on("click", "div", function( event ){
          event.preventDefault();
          var card_id = $(this).attr('id');
          var col_id = document.getElementById('addtocol_'+card_id).innerHTML;
          $.ajax({
              url: ""+homelink+"/addtocol.php", 
              method: "POST",
              data:{'card_id':card_id, 'col_id':col_id},
              success: function(result){
                  $('div[id="' + card_id + '"]').fadeOut();
               $('#card_'+card_id+'').append('&lt;div class="status del_btn del_btn_card_'+card_id+'" id="'+card_id+'"&gt;&lt;span id="removefromcol_'+card_id+'"&gt;'+col_id+'&lt;/span&gt;-&lt;/div&gt;');              
          }});
      });
  //});
  </code></pre>
  
  <p>Who can help me out here?
  Thanks in advance.</p>