title: $(document).ready listeners not running on dynamic content
body: <p>I have a <code>$(document).ready</code> function that sets up listeners for certain elements.  However, all of the <code>#leave-ride</code> elements are added dynamically.  </p>
  
  <p>Listeners:</p>
  
  <pre><code>$(document).ready(function() {
      $("#post-ride").click(function() {
          addRide(currentDriver, $(destinationInput).val(), $(originInput).val(), $(dateInput).val(), $(timeInput).val());
          $.getScript("scripts/myRides.js", function() {});
      });
  
      $("#request-ride").click(function() {
          requestRide(currentDriver, $(destinationInput).val(), $(originInput).val(), $(dateInput).val(), $(timeInput).val());
          $.getScript("scripts/myRides.js", function() {});
      });
  
      $("#leave-ride").click(function() {
          console.log("leave Ride");
          leaveRide(currentDriver, $("leave-ride").closest("div").attr("id"));
          $.getScript("scripts/myRides.js", function() {});
      });
  });
  </code></pre>
  
  <p>What do I need to do to get that listener to listen to dynamic content?</p>