Ajax Request работает только один раз

Question

Я работаю над классом кодировщика. Я хочу обновить корзину, когда пользователь меняет количество элементов.

У меня есть 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, не имеет события изменения, поэтому он не работает.

поэтому попробуйте выше код, который будет связывать событие изменения на dynamiccally создать элемент

EDITED

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

вы можете уменьшить свой выбор на один окружающий ваш элемент @Jack

Answer 2

Хорошо эта проблема происходит из-за пост назад, Jquery оленьей кожи работы после поста назад

Там в два метода вы должны назвать вашу функцию на странице загрузке или любом случае вы также можете использовать этот код

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

поместить свой код в этой функции, а также которые не работают

function funtionPost() 
    { 
    } 

Я надеюсь, что это ж орк

Answer 3

изменить ваш jquery codes to

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

и что должно его решить