title: jQuery interact with appended data
body: <p>Can anyone point out what I'm doing wrong here? I'm trying to interact with data (appended using ajax)</p>
  
  <p>The alerts fire if the element is already in DOM, but not when It's appended. </p>
  
  <p>Am I using the ".on" wrong?</p>
  
  <pre><code>$(function() {
  
    $('.card').on('click','.add-exercise', function() {
      alert('clicked');
    });
  
    // Detect 'enter' key up
    $('#search').on('keyup', function(e){
      if(e.keyCode == 13)
      {
        console.log('hit enter key');
        $(this).trigger("enterKey");
      }
    });
  
    $('#search').on("enterKey",function(e){
  
      $.ajax({
        url: '{{ url("exercises/load") }}',
        method: "POST",
        data: {
          _token: "{{csrf_token()}}",
          search: $('#search').val(),
        },
        dataType: "text",
        success: function(data) {
          console.log(data);
          $('.exercise-result').remove();
          $('.card-deck').append(data);
        }
      });
  
    });
  
  });
  </code></pre>