如何查找多个.change（）事件到使用AJAX操作的项目

First question here so I'll do my best to follow all the rules.

I have a PHP page that has 2 select groups, the 2nd group is disabled by default.

First select group is called "yearlist", second select group is called "makelist"

When a user changes a selection in yearlist, the 2nd box (makelist) is filled in with choices from a database table (via an ajax request in my script.js) and is no longer disabled.

My problem arises when I make a selection in the 2nd select group, makelist. I want jQuery to put out a simple alert("hello") when it notices a change made by the user in that makelist group, but it won't work, and I'm not sure why.

The main file:

<?php 

    $con = mysqli_connect("localhost","xxxx","xxxx","xxxx");

    $query="SELECT * FROM carstats GROUP BY year ORDER BY year DESC";

    $result = mysqli_query($con, $query);

?>
<script type="text/javascript" src="js/script.js"></script>

<select id="yearlist" name="yearlist">
    <option>SELECT YEAR</option>
        <?php 
            while ($row=mysqli_fetch_array($result)){
                echo "<option>" . $row['year']. "</option>";
            }
        ?>
</select>

<!--this will be populated/replaced via ajax-->
<div class="makeResult">
    <select id="makelist" name="makelist" disabled="disabled">
        <option>SELECT MAKE</option>
    </select>
</div>

The jQuery (script.js):

$(document).ready(function() {
    $('#yearlist').change(function() {

        //save the selection as a variable
        var selectedYear = $(this).val();

        $.get("change_query.php?selectedYear="+selectedYear, function(data){
            $('div.makeResult').html(data);
         });//end get function
    });//end yearlist change function   

    $('#makelist').change(function() {

        //eventually want to do more but for now just alert that it's working
        alert("makelist has been changed");

    });//end makelist change function   

});//end ready function

and finally, change_query.php file:

<?php
    $con = mysqli_connect("localhost","xxxx","xxxx","xxxx");

    $year = $_GET["selectedYear"];//this is grabbed from the JS script

    $query="SELECT * FROM carstats WHERE year='".$year."' GROUP BY make ORDER BY make";

    $result = mysqli_query($con, $query);

?>

<select id="makelist" name="makelist">
    <option>SELECT MAKE</option>
    <?php
            while ($row=mysqli_fetch_array($result)){
                echo "<option>" . $row['make']. "</option>";
            }
        ?>
</select>

When you use:

    $('div.makeResult').html(data);

You are removing the #makelist element and the change event that was attached, so you have a new #makelist element, but no change event. Place your $('#makelist').change() function within the $.get callback function.

$.get("change_query.php?selectedYear="+selectedYear, function(data){
    $('div.makeResult').html(data);
    $('#makelist').change(function() {

            //eventually want to do more but for now just alert that it's working
            alert("makelist has been changed");

     });//end makelist change function   
 });//end get function

Just to clarify, when you attach an event like $('#makelist').change(...), you are attaching that event to the element and not the ID. If you replace the element, the event is gone, even if the the element has the same id as the old one.

As James L said, what happens is the #makelist DOM node is getting destroyed when you overwrite it, so the event handler is no longer attached.

Instead of

$('#makelist').change(function () {})

You could use

$(document).on('change', '#makelist', function() {})

This will attach the event handler to the document, where it will always get called.