Javascript not affecting content that is loaded by another script
<p>I am using jQuery to load a php form and bootstrap.js for a datepicker element on that form; this code is in a file script.js:</p>

<pre><code>$(document).ready(function() {

    // load form via ajax when button is clicked is submitted
    $('.add-opportunity .open').on('click', function() {

        // get form
        $('.add-opportunity').load('add_opportunity.php'); 
    });

    // datepicker
$('#datepicker').datepicker();        
});
</code></pre>

<p>With this format the datepicker does not function. If however, I put the jQuery in the php file, also in document(ready), it functions properly. I would like to keep all my javascript in separate files. Any ideas?</p>
