Call HTML Element ID On Ajax Return Data In JQuery

I have a problem here.

I have done jQuery and Ajax, but I am not able to get the id element on my page. This is the code (I use Codeigniter):

$('#courier').change(function(e){
  var courier = $(this).val();
  var cityfrom = $('#cityfrom').val();
  var cityto = $('#cityto').val();
  var weight = $('#tot_weight').val();
  $.ajax({
    type: "POST",
    url: "<?php echo base_url();?>backend/Ctransaction/showShipType",
    data: {Courier:courier, Cityfrom:cityfrom, Cityto:cityto, Weight:weight},
    datatype:"html",
    success: function(data){
      $('#detailtype').html(data);
    }
  });
});

My Model:

function showShipType(){
    $courier = $this->input->post('Courier');
    $cityfrom = $this->input->post('Cityfrom');
    $cityto = $this->input->post('Cityto');
    $weight = $this->input->post('Weight');

    $cost = $this->rajaongkir->cost($cityfrom, $cityto, $weight, $courier);

    $data= "<select class='form-control' id='typeship' name='typeship'>";

    $data1 = json_decode($cost,true);

    for($i=0;$i<count($data1['rajaongkir']['results']);$i++){

      for($j=0;$j<count($data1['rajaongkir']['results'][$i]['costs']);$j++){
            $type = $data1['rajaongkir']['results'][$i]['costs'][$j]['service'];
            $price = $data1['rajaongkir']['results'][$i]['costs'][$j]['cost'][0]['value'];

            $data.= "<option value='$type'>$type</option>";
      }
    }

    $data.="</select>";

    echo $data;

}

That code will response with my div in view

<div id='detailtype'></div>

The ajax.php returns following code to div 'detailtype'

<select class='form-control' id='typeship' name='typeship'>
   <option></option>
   <option value='OKE'>OKE</option>
   <option value='REG'>REG</option>
   <option value='YES'>YES</option>
</select>

My View Pict

The problem is:

I need to call #typeship and get the value from the dropdown to get shipping cost value.

$('#typeship').change(function(e){
  var courier = $('#courier').val();
  var cityfrom = $('#cityfrom').val();
  var cityto = $('#cityto').val();
  var weight = $('#tot_weight').val();
  var shiptype = $(this).val();
  alert (shiptype); // didn't response -> no alert pop up 
  $.ajax({
    type: "POST",
    url: "<?php echo base_url();?>backend/Ctransaction/showShipCost",
    data: {Courier:courier, Cityfrom:cityfrom, Cityto:cityto, Weight:weight, Shiptype:shiptype},
    datatype:"html",
    success: function(data){
      $('#detailcost').html(data);
    }
  });
});

But I've tried many times to call #typeship, it seems don't response my code. I'm stuck, can't get the shipping cost value because of that.

I need your help to figure out my code problem. I don't know how to resolve this.

Thank you very much.

Your problem is that you are trying to use jquery on dynamically added html without listening to changes in your html.

Use jQuery .on()

$(document).on('change', '#typeship', function(e){
  var courier = $('#courier').val();
  var cityfrom = $('#cityfrom').val();
  var cityto = $('#cityto').val();
  var weight = $('#tot_weight').val();
  var shiptype = $(this).val();
  alert (shiptype); // didn't response -> no alert pop up 
  $.ajax({
    type: "POST",
    url: "<?php echo base_url();?>backend/Ctransaction/showShipCost",
    data: {Courier:courier, Cityfrom:cityfrom, Cityto:cityto, Weight:weight, Shiptype:shiptype},
    datatype:"html",
    success: function(data){
      $('#detailcost').html(data);
    }
  });
});