javascript - 在 jQuery 中调用 Ajax 返回数据的 HTML 元素 ID

Question

我这里有一个问题。

我已经完成了 jQuery 和 Ajax，但我无法获取页面上的 id 元素。这是代码(我使用 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);
    }
  });
});

我的模型:

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 在 View 中

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

ajax.php 将以下代码返回到 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

您的问题是您尝试在动态添加的 html 上使用 jquery，而不监听 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);
    }
  });
});