Ajax请求只工作一次 [英] Ajax Request works only once

问题描述

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

I am working on cart class of codeigniter. I want to update cart when user changes qty of item.

我有这样的jquery文件

I have jquery file like this

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

});

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

I am requesting to controller below to update the cart.

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>

当我改变选择选项（包含产品的qty）时，AJAX请求被发送， 。但是，它只工作第一次，它不工作从第二次起。

When I changed select option (that contains qty of product), The AJAX request is sent and it works. But, It works only for the first time, it doesnt work from second time onwards.

当我删除ajax请求调用和放置警报时，它每次都工作。这意味着只有在ajax部分有问题。我昨天卡住了。请帮助。

When I delete ajax request call and place alert instead, it works everytime. That means there is problem on ajax part only. I am stuck since day before yesterday. Please help.

推荐答案

尝试类似这样

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

这是因为你正在替换你应用了change jquery event的元素。

That because you are replacing your element on which you have applied change jquery event.

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

so new element coming from ajax doesn't have change event so it doesn't work.

在动态创建元素上绑定更改事件

so try above code which will bind change event on dynamiccally create element

已修改

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

您可以最小化您对元素的选择
@Jack

you can minimize your selection to one surrounding your element @Jack

这篇关于Ajax请求只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！