在Ajax上調用HTML元素ID在jQuery中返回數據

Question

我在這裏遇到問題。

我已經完成了jQuery和Ajax，但是我無法獲取我的頁面上的id元素。 這是代碼（我用笨）：

$('#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); 
    } 
    }); 
}); 

我的模型：

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; 

} 

該代碼會響應我的div鑑於

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

的ajax.php返回以下代碼div 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

的問題是：

我需要調用#typeship，並從下拉獲得的價值來獲得運輸成本的價值。

$('#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); 
    } 
    }); 
}); 

但我已經嘗試了很多次調用#typeship，它似乎不響應我的代碼。 我卡住了，因此無法獲得運輸成本價值。

我需要你的幫助來找出我的代碼問題。 我不知道如何解決這個問題。

非常感謝。

Answer 1

你的問題是，你正在試圖使用jQuery的動態添加的HTML而不聽你的HTML中的變化。

使用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); 
    } 
    }); 
});