jQueryのAjax返信データでHTML要素IDを呼び出す

Question

ここに問題があります。

私はjQueryとAjaxを行っていますが、私のページにid要素を取得できません。 これはコード（私はCodeIgniterのを使用）です：コードビューで私のdiv要素を持つ応答

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

意志以下ajax.php返すこと

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; 

} 

：

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

マイモデル「詳細タイプ」を分割するコード

<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を呼び出すために何度も試してみましたが、私のコードには反応しないようです。 私は立ち往生しているので、そのために送料の値を取得できません。

私のコードの問題を理解するためにあなたの助けが必要です。 これを解決する方法がわかりません。

ありがとうございました。

Answer 1

あなたの問題は、動的に追加されたhtmlでhtmlの変更を聞かずにjqueryを使用しようとしていることです。

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