title: jQuery - .on('click'.. doesn't work on new AJAX content
body: <p>I have a list of people for an event, which is called through ajax together with the ID of the event, and put into a div.
  (I can change which event will be showed with a select-list).</p>
  
  <p>If I check a person off (checkbox after each person), they get a class of "removed". 
  They are then hidden in the list.</p>
  
  <pre><code>$(this).hide();.
  </code></pre>
  
  <p>I also have a button called Show All, and when clicked, this code is called:</p>
  
  <pre><code>$(document).on('click', '#showAll', function () {
      $('.removed').toggle();
  });
  </code></pre>
  
  <p>This works, until I change list. If I change list, nothing happens when the Show All-button is pressed. If I then change back to the previous event, it works as before.</p>
  
  <p>So the problem is, the Show All-button is locked to the first event I use the button on, and then I am unable to use it when I switch events. It only works if I refresh the page.</p>
  
  <p>I read somewhere to use event.preventDefault(); but it still doesn't work (and maybe it's not the solution at all). I have also tried to get the Show All-button with ajax and reload it every time I change event (as if it would break the connection to the current event), but it still doesn't work (and I really don't understand why with this solution).</p>
  
  <p><strong>Edit:</strong> I removed the unrelevant code and cleaned it up a bit. (And I noticed the ShowAll-button had a class and not an ID as I wrote before.</p>
  
  <pre><code>/* HTML for the button */
  &lt;td class="showAll button"&gt;Show All&lt;/td&gt;
  
  /* jQuery */
  
  $('#eventID').change(function() { //Select-list
  
      eventID = $(this).find('option:selected').val();
  
      function check() { // To mark a person who has attended and give them a class of removed
          $('#allAttendees').on('click', 'input[type="checkbox"]', function() {
              var email = $(this).val();
              var removed;
  
              removed = $(this).attr('name');
  
              $('#allAttendees tr[value="'+email+'"]').hide();
              $('#allAttendees tr.removed').hide();
  
              $.ajax({
                  url: /* path */,
                  type: 'POST',
                  data: 'eventID=' + eventID + '&amp;email=' + email + '&amp;removed=' + removed,
                  success: function(ADD) {
                      getAll();
                  }
              });
          });
      }
  
      function getAll() { // Gets the list of all persons for the event
          $.ajax({
              url: /* path */,
              type: 'POST',
              data: 'eventID=' + eventID,
              success: function(getAttendieesData) {
                  $('#attendies').html(getAttendieesData);
  
                  check();
              }
          });     
      }
  
      $(document).on('click', '.showAll', function () { // Should hide/show all persons with the class removed, but only works on the first event I use it on
          $('.removed').toggle();
      });
  
  });
  </code></pre>