selecting dom elements after html was inserted in a page with ajax

I created an ajax tab navigation with html being inserted into the page. the code looks like this:

$.ajax({
        type: 'POST',
        url: 'main/ajaxjson/load_course_details',
        data: {page : which, course_id: id},
        success: function(home){

            $('#ajax-content ').hide();
            $('#ajax-content').empty().append(home);
            $('#ajax-content').fadeIn(); 
        }

    });

ok...so I append my markup into my html. Now I need to select dom elements from the inserted html, but I can not. I have the following code:

<a href="javascript:;" class="light-button">Next</a>
<select id="chapters-select">
    <?php foreach ($chapters as $chapter) : ?>
    <option value="<?php echo $chapter->id; ?>"><?php echo $chapter->title; ?></option>
    <?php endforeach; ?>
</select>

Here I generate the select options dynamically. When I try to do this:

$('#chapters-select').change(function(){
    alert('changed');
});

it doesn't work. How can I use javascript after I append the html via ajax ?