How to call an ajax from a combobox created by another ajax

[eluser]Javatuan[/eluser]
I want to create a simple invoice with 5 products.

For each row:
- I have a Produc Type combobox, when 1 item is chosen, I will create a coresponding Product combobox << first ajax >>
- When 1 item in Product combobox is chosen, I want to create a text to show number of that product in the repository << second ajax >>

The problem is jQuery does not recognize the combobox "<select id='product1'>" sent from controller's action and the ajax I expect by "$('#product1').change" is not fired.

I tried to put <div id=divproduct1> between "<select id='product1'>" and "</select>" but it didn't work. Could you help me to solve?

My view is

Code:

<div style="float:left; width:270px">
<select id="producttypecode1">
    <option value=''>...</option>
    <option value='1'>Type 1</option>
    <option value='2'>Type 2</option>
</select>
</div>

<div id='divproduct1'>
    <select id='product1'></select>
</div>

Script in view is

Code:

< script language="JavaScript">
    document.addinvoice.producttypecode1.focus();
    $(document).ready(function() {
        // 1st ajax
        $('#producttypecode1').change(function() {
            var producttypecode = $(this).val();
            $.ajax({
                url: '../../index.php/product/productlist',
                data: 'producttypecode='+producttypecode,
                type: 'POST',
                success: function (data){
                    $('#divproduct1').html(data);
                }
            });
        });
        
        // 2nd ajax
        $('#product1').change(function() {
            var productid = $(this).val();
            $.ajax({
                url: '../../index.php/product/productdetail',
                data: 'productid='+productid,
                type: 'POST',
                success: function (data){
                    $('#repo1').html(data);
                }
            });
        });
    });
    */
</ script>

My controller is

Code:

// for 1st ajax query
function productlist(){
    $producttypecode = trim($this->input->post('producttypecode'));        
    
    $productSearch = array('TYPE_CODE' => $producttypecode);
    $productlist = $this->Product_model->getProduct($productSearch);
    $array = array('productlist' => $productlist);
    echo "<select id='product1'>";
    echo "<option>...</option>";
    foreach ($productlist as $product){
        echo "<option value=".$product['PRODUCT_ID'].">".$product['PRODUCT_NAME']."</option>";
    }
    echo "</select>";
}

// for 2nd ajax query
function productdetail(){
    $productid = trim($this->input->post('productid'));        
    
    $productSearch = array('PRODUCT_ID' => $productid);
    $product = $this->Product_model->getProduct($productSearch);
    
    echo $product[0]['REMAINING'];
}

[eluser]JuanitoDelCielo[/eluser]
The problem its very simple document Ready do what ever it does when the dom is ready. At this point only one the of the combos are part of the dom. Try to use live() feature of jquery or attach the behaviour when the combo it already created.

[eluser]Javatuan[/eluser]
I've change the second ajax call to

Code:

// 2nd ajax
$('#product1').live('change', function() {

and it works well.

Thank Juanito very much