Applying ajax to ajax-generated data

Applying ajax to ajax-generated data

hey folks

i have a series of <select> fields.
The first one, via ajax(), generates a 2nd one, based on the first ones' data with the .change() method.
there is then a 3rd <select> - who's data will depend on choice of the second one

although step 1 works, and i can generate the 2nd one, i still can't generate the 3rd one.

when i test the script on its own, both the 2nd and 3rd  <select> fields are fine - but not via the ajax, which leads me to believe that the .change() from the 2nd one, isnt triggering the ajax call - its not being picked up (even the 'hello' alert isnt working).

any help appreciated!

code below.

thanks!

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.pack.js"></script>
    <script type="text/javascript">
    $(function(){
              
        $('select#x_file_cat1').change(function() {
               var x_file_cat1 = $("select#x_file_cat1").val();
               var dataString = 'x_file_cat1='+ x_file_cat1;
              // alert (dataString);return false; 
              updateSelect(dataString, '#x_file_subcat1_reply');
          });
        $('select#x_file_subcat1').change(function() {
            alert('hello');
               var x_file_cat1 = $("select#x_file_cat1").val();
               var x_file_subcat1 = $("select#x_file_subcat1").val();
               var dataString = 'x_file_cat1='+ x_file_cat1 + '&x_file_subcat1=' + x_file_subcat1;
              // alert (dataString);return false; 
              updateSelect(dataString, '#x_file_subsubcat1_reply');
          });

        function updateSelect(dataString, returnTo){              
                      
                      $.ajax({
                        type: "POST",
                        url: "/includes/getSubcats.asp",
                        data: dataString,
                        success: function(data) {
                        $(returnTo).html(data);
                               }
                            });
         }
    });</script>