Ajax请求只能工作一次

我正在研究推车类的codeigniter。 我想在用户更改项目的数量时更新购物车。

我有这样的jquery文件

$(function() { $('#bookings_form_customer select').on('change', function(ev) { var rowid = $(this).attr('class'); var qty = $(this).val(); var postData_updatecart = { rowid : rowid, qty : qty }; //posting data to update cart $.ajax({ url : base_url + 'bookings/update_booking_cart', cache : false, type : 'post', data : postData_updatecart, beforeSend : function() { $('#cart_content').html('Updating...'); }, success : function(html) { $('#cart_content').html(html); } }); }); }); 

我要求下面的控制器更新购物车。

 class Bookings extends NQF_Controller { public function update_booking_cart() { $rowid = $this -> input -> post('rowid'); $qty = $this -> input -> post('qty'); $data = array('rowid' => $rowid, 'qty' => $qty); $this -> cart -> update($data); $this -> load -> view('shop/cart'); } } 

我的商店/购物车档案看起来像这样

 
  'bookings_form_customer', 'id' => 'bookings_form_customer')); ?>   cart->contents() as $items): ?>      session -> userdata('booking_pickup')=='courier') { ?>    session -> userdata('booking_return')=='courier') { ?> 
 
 
Item Description
 
QTY
 
Item Price
 
Sub-Total
 
 
  cart->has_options($items['rowid']) == TRUE): ?> 
 cart->product_options($items['rowid']) as $option_name => $option_value): ?> : 
  
  
 
 <select name="" class=""> <?php for($tt=0; $tt <option value="" >   
 
cart->format_number($items['price']); ?>
 
$cart->format_number($items['subtotal']); ?>
 
 
Pick Up Fees
 
 
HK $20
 
 
 
Drop Off Fees
 
 
HK $20
 
 
  
 
 
 
Total
 
$cart->format_number($this->cart->total()); ?>
 
 
 
   

当我更改选择选项（包含产品的数量）时，会发送AJAX请求并且它可以正常工作。 但是，它只是第一次起作用，从第二次开始它不起作用。

当我删除ajax请求调用并发出警告时，它每次都有效。 这意味着只有ajax部件存在问题。 我从前天就被卡住了。 请帮忙。

Answer 1

尝试这样的事情

 $(function() { $(document).on( "change", "#bookings_form_customer select", function(ev) { // your code goes here }); }); 

那是因为您要替换已应用更改jquery事件的元素。

所以来自ajax的新元素没有更改事件，所以它不起作用。

所以尝试上面的代码，它将在dynamiccally创建元素上绑定change事件

EDITED

 $(function() { $('#cart_content').on( "change", "#bookings_form_customer select", function(ev) { // your code goes here }); }); 

你可以把你的选择最小化到你的元素周围@Jack

Answer 2

将您的jquery代码更改为

 $(function() { $('#bookings_form_customer').on('change', 'select', function(ev) { var rowid = $(this).attr('class'); var qty = $(this).val(); var postData_updatecart = { rowid : rowid, qty : qty }; //posting data to update cart $.ajax({ url : base_url + 'bookings/update_booking_cart', cache : false, type : 'post', data : postData_updatecart, beforeSend : function() { $('#cart_content').html('Updating...'); }, success : function(html) { $('#cart_content').html(html); } }); }); 

这应该解决它

Answer 3

好的，这个问题是由于回发后发生的，jQuery在回发后不起作用

您在页面加载时调用函数有两种方法，或者您也可以使用此代码的任何事件

  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(funtionPost); 

把你的代码放在这个函数中也是行不通的

  function funtionPost() { } 

我希望这会奏效