Ajax 请求只工作一次

Question

我正在研究 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');
    }

}

我的商店/购物车文件如下所示

<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>

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

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

Answer 1

试试这样的

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

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

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

所以试试上面的代码，它将在动态创建元素上绑定更改事件

已编辑

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

您可以将您的选择最小化为围绕您的元素 @杰克

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

$(document).ready(function(){
$(document).on( 'click',"#itemQuantity",function(){
    var $element = $(this).closest('#result');
    var productPrice = $element.find("#productPrice").val();
    var itemQuantity = $element.find("#itemQuantity").val();
    var productId    = $element.find("#productId").val();
    event.preventDefault();
    location.reload(true);
    $.ajax({
        url: "shopping_cart.php",
        data: 
          {Price:productPrice,Quantity:itemQuantity,productID:productId},
        method: 'POST',
        success: function (data){
            $("#result").html(data);
        }
    })
});

});

-

---

你可以在.on函数中插入第二个参数想要得到结果的按钮，并使用最接近的方式搜索特定元素。

location.reload(true) 方法从缓存中重新加载页面并强制它重新加载页面，并使用 event.preventDefault()

---

Answer 4

好的，这个问题是因为post back，jquery在post back后不起作用

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

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

将您的代码也放入此函数中，这是行不通的

  function funtionPost()
   {
   }

我希望这会奏效