Jquery Ajax请求只工作一次
我正在从事codeigniter的cart类工作。我想在用户更改商品数量时更新购物车 我有这样的jquery文件Jquery Ajax请求只工作一次,jquery,ajax,codeigniter,Jquery,Ajax,Codeigniter,我正在从事codeigniter的cart类工作。我想在用户更改商品数量时更新购物车 我有这样的jquery文件 $(function() { $('#bookings_form_customer select').on('change', function(ev) { var rowid = $(this).attr('class'); var qty = $(this).val(); var postData_updateca
$(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);
}
});
});
});
<div class="cart_form">
<?php echo form_open(base_url().'index.php/bookings/customerdetails', array('class' => 'bookings_form_customer', 'id' => 'bookings_form_customer')); ?>
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th style="text-align:left">Item Description</th>
<th style="text-align:left">QTY</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<?php $i = 1; ?>
<?php foreach ($this->cart->contents() as $items): ?>
<?php echo form_hidden($i.'[rowid]', $items['rowid']); ?>
<tr>
<td>
<?php echo $items['name']; ?>
<?php if ($this->cart->has_options($items['rowid']) == TRUE): ?>
<p>
<?php foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?>
<strong><?php echo $option_name; ?>:</strong> <?php echo $option_value; ?><br />
<?php endforeach; ?>
</p>
<?php endif; ?>
</td>
<td>
<select name="<?php echo $i.'[qty]'; ?>" class="<?php echo $items['rowid']; ?>">
<?php
for($tt=0; $tt<=10; $tt++)
{
?>
<option value="<?php echo $tt; ?>" <?php if($tt==$items['qty']) echo 'selected="selected"'; ?>><?php echo $tt; ?></option>
<?php
}
?>
</select>
</td>
<td style="text-align:right"><?php echo $this->cart->format_number($items['price']); ?></td>
<td style="text-align:right">$<?php echo $this->cart->format_number($items['subtotal']); ?></td>
</tr>
<?php $i++; ?>
<?php endforeach; ?>
<?php
if($this -> session -> userdata('booking_pickup')=='courier')
{
?>
<tr>
<td>Pick Up Fees</td>
<td></td>
<td style="text-align:right">HK $20</td>
<td></td>
</tr>
<?php
}
?>
<?php
if($this -> session -> userdata('booking_return')=='courier')
{
?>
<tr>
<td>Drop Off Fees</td>
<td></td>
<td style="text-align:right">HK $20</td>
<td></td>
</tr>
<?php
}
?>
<tr>
<td colspan="2"> </td>
<td class="right"><strong>Total</strong></td>
<td class="right">$<?php echo $this->cart->format_number($this->cart->total()); ?></td>
</tr>
</table>
<p><?php echo form_submit('update_cart', 'Update your Cart'); ?></p>
</form>
</div>
$(function() {
$(document).on( "change", "#bookings_form_customer select", function(ev) {
// your code goes here
});
});
我请求下面的管理员更新购物车
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');
}
}
我的商店/购物车文件如下所示
$(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);
}
});
});
});
<div class="cart_form">
<?php echo form_open(base_url().'index.php/bookings/customerdetails', array('class' => 'bookings_form_customer', 'id' => 'bookings_form_customer')); ?>
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th style="text-align:left">Item Description</th>
<th style="text-align:left">QTY</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<?php $i = 1; ?>
<?php foreach ($this->cart->contents() as $items): ?>
<?php echo form_hidden($i.'[rowid]', $items['rowid']); ?>
<tr>
<td>
<?php echo $items['name']; ?>
<?php if ($this->cart->has_options($items['rowid']) == TRUE): ?>
<p>
<?php foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?>
<strong><?php echo $option_name; ?>:</strong> <?php echo $option_value; ?><br />
<?php endforeach; ?>
</p>
<?php endif; ?>
</td>
<td>
<select name="<?php echo $i.'[qty]'; ?>" class="<?php echo $items['rowid']; ?>">
<?php
for($tt=0; $tt<=10; $tt++)
{
?>
<option value="<?php echo $tt; ?>" <?php if($tt==$items['qty']) echo 'selected="selected"'; ?>><?php echo $tt; ?></option>
<?php
}
?>
</select>
</td>
<td style="text-align:right"><?php echo $this->cart->format_number($items['price']); ?></td>
<td style="text-align:right">$<?php echo $this->cart->format_number($items['subtotal']); ?></td>
</tr>
<?php $i++; ?>
<?php endforeach; ?>
<?php
if($this -> session -> userdata('booking_pickup')=='courier')
{
?>
<tr>
<td>Pick Up Fees</td>
<td></td>
<td style="text-align:right">HK $20</td>
<td></td>
</tr>
<?php
}
?>
<?php
if($this -> session -> userdata('booking_return')=='courier')
{
?>
<tr>
<td>Drop Off Fees</td>
<td></td>
<td style="text-align:right">HK $20</td>
<td></td>
</tr>
<?php
}
?>
<tr>
<td colspan="2"> </td>
<td class="right"><strong>Total</strong></td>
<td class="right">$<?php echo $this->cart->format_number($this->cart->total()); ?></td>
</tr>
</table>
<p><?php echo form_submit('update_cart', 'Update your Cart'); ?></p>
</form>
</div>
$(function() {
$(document).on( "change", "#bookings_form_customer select", function(ev) {
// your code goes here
});
});
项目说明
数量
项目价格
小计
:
好的,这个问题是由于回发造成的,回发后jQuery不工作
有两种方法
您已经在页面加载或任何事件上调用了函数
您也可以使用此代码
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(funtionPost);
把你的代码也放在这个函数中,这是不起作用的
function funtionPost()
{
}
我希望这能奏效试试这样的方法
$(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);
}
});
});
});
<div class="cart_form">
<?php echo form_open(base_url().'index.php/bookings/customerdetails', array('class' => 'bookings_form_customer', 'id' => 'bookings_form_customer')); ?>
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th style="text-align:left">Item Description</th>
<th style="text-align:left">QTY</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<?php $i = 1; ?>
<?php foreach ($this->cart->contents() as $items): ?>
<?php echo form_hidden($i.'[rowid]', $items['rowid']); ?>
<tr>
<td>
<?php echo $items['name']; ?>
<?php if ($this->cart->has_options($items['rowid']) == TRUE): ?>
<p>
<?php foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?>
<strong><?php echo $option_name; ?>:</strong> <?php echo $option_value; ?><br />
<?php endforeach; ?>
</p>
<?php endif; ?>
</td>
<td>
<select name="<?php echo $i.'[qty]'; ?>" class="<?php echo $items['rowid']; ?>">
<?php
for($tt=0; $tt<=10; $tt++)
{
?>
<option value="<?php echo $tt; ?>" <?php if($tt==$items['qty']) echo 'selected="selected"'; ?>><?php echo $tt; ?></option>
<?php
}
?>
</select>
</td>
<td style="text-align:right"><?php echo $this->cart->format_number($items['price']); ?></td>
<td style="text-align:right">$<?php echo $this->cart->format_number($items['subtotal']); ?></td>
</tr>
<?php $i++; ?>
<?php endforeach; ?>
<?php
if($this -> session -> userdata('booking_pickup')=='courier')
{
?>
<tr>
<td>Pick Up Fees</td>
<td></td>
<td style="text-align:right">HK $20</td>
<td></td>
</tr>
<?php
}
?>
<?php
if($this -> session -> userdata('booking_return')=='courier')
{
?>
<tr>
<td>Drop Off Fees</td>
<td></td>
<td style="text-align:right">HK $20</td>
<td></td>
</tr>
<?php
}
?>
<tr>
<td colspan="2"> </td>
<td class="right"><strong>Total</strong></td>
<td class="right">$<?php echo $this->cart->format_number($this->cart->total()); ?></td>
</tr>
</table>
<p><?php echo form_submit('update_cart', 'Update your Cart'); ?></p>
</form>
</div>
$(function() {
$(document).on( "change", "#bookings_form_customer select", function(ev) {
// your code goes here
});
});
这是因为您正在替换应用了ChangejQuery事件的元素
所以来自ajax的新元素没有更改事件,所以它不起作用
所以请尝试上面的代码,它将动态地在创建元素上绑定更改事件
已编辑
$(function() {
$('#cart_content').on( "change", "#bookings_form_customer select", function(ev) {
// your code goes here
});
});
可以将您的选择最小化为围绕图元的选择
@Jack将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);
}
});
});
这应该可以解决问题假设#cart_content
是周围的元素,那么最好从那里委派click事件,而不是document
。