Jqueryui Datepicker not displaying calendar

Question

I am currently using jquery ui datepicker for two input fields. In order to call the calendar the inputfield must have a class of datepicker. I am using a for loop in the javascript to generate the input fields. I have added the class datepicker to each input field that can be possibly generated. But no calendar appears. In the firebug console the html does show that the input fields have class datepicker. Now if do this with a static input field it works fine. How can I display calendar when the field is click? Example

In the jquery this is the line where i set the class:

content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';

Full Jquery code

<script>
    $(document).ready(function () {
        $('select').change(function() {
            var option = $(this).val();
            showFields(option);
            return false;
        });

        function showFields(option) { 
            var content = '';
            for (var i = 1; i <= option; i++) {
                content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'"><option value="">--- Select ---</option>"'
                    <?php
                        $course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list ");
                        $course_query->execute();
                        $data = $course_query->fetchAll();
                        foreach ($data as $row) {
                            //dropdown values pulled from database
                            echo 'content += \'<option value="' . $row['course_id'] . ':'.$row['course_name'].'">' . $row['course_name'] . '</option>\';';
                        }
                    ?>
                '"';                   

                content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';

            }

            $('#course_catalog').html(content);
        }
    });

    $(function() {
        $( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }).val();
    });
</script>

HTML

<form action="courses.php" method="POST">
    <b>Select the course</b>
    Academy<input id="academy_id" name="acad_id" placeholder="Academy ID" type="text" />
    Courses being offered?
    <select name="courses_offered">
        <option value="default">---Select---</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <div id="course_catalog"></div>
    Static input: <input type="text" id="last_contacted_date" name="last_contacted_date" class="datepicker" />
    <input value="SAVE" name="submit" type="submit">
</form> 

Answer 1

What you want to do is make sure that the datepicker code runs after the content has been created and added to the DOM. The easiest way to do this would be to move the datepicker code inside your showFields method, right at the end. Like this:

function showFields(option) { 

    . . . rest of method . . .

    $('#course_catalog').html(content);

    $('#course_catalog').find(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
}

The $('#course_catalog').find(".datepicker") part will make sure that only the dynamically added datepicker fields will be initialized (you don't want to run it again against the static ones).