При обновлении информации в Модальном окне — перестаёт работать JavaScript, как исправить?

Question

[MURZELLO]

CMS OpenCart. В модальное окно загружается основная информация о товаре, в котором работают кнопки Купить или добавить в избранное. Но, при нажатии на стрелку "Next" (внизу окна - слева) - кнопка Купить перестаёт работать. Хотя, добавить в избранное - по прежнему срабатывает.
То есть, при обновлении информации в модальном окне - скрипт добавления товара в корзину не работает.
Вот пример (рядом с кнопкой "Купить" - ссылка "Просмотр")

Вызов модального окна происходит ссылкой:

<a href="<?php echo $product['href']; ?>" class="c-view c-goup-product">Просмотр</a>

И скриптом:

<script type="text/javascript">
$(document).ready(function() {
$('.c-view').colorbox({
	iframe: false,
	rel: 'c-goup-product',
 });
}); 
</script>

Скрипт добавления товара в корзину:

<script type="text/javascript">
$('#button-cart').bind('click', function() {
 $.ajax({
  url: 'index.php?route=checkout/cart/add',
  type: 'post',
  data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
  dataType: 'json',
  success: function(json) {
   
   $('.success, .warning, .attention, notificationz, .error').remove();
   
   if (json['error']) {
    location = json['redirect'];
} 
   
   if (json['success']) {
    $('#notificationz').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
     
    $('.success').fadeIn('slow');
     
    $('#cart-total').html(json['total']);
    
    $('html, body').animate({ scrollTop: 0 }, 'slow'); 
   } 
  }
 });
});
</script>

Подскажите, как обновить этот скрипт - при переходе на другой товар?
(В ява скриптах не силен...)

Answer 1

[Дмитрий Евграфович]

У вас скрипт не может сработать, потому что он повешан на элемент #button-cart, которого не существует, когда скрипт запускается. Если у вас jquery такая же, как и на этом сайте (1.7 и старше), то можете использовать метод .on() на элементе-родителе, который существует при запуске скрипта, а сам #button-cart указать как параметр:

$('#colorbox').on('click', '#button-cart', function() {
 $.ajax({
  url: 'index.php?route=checkout/cart/add',
  type: 'post',
  data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
  dataType: 'json',
  success: function(json) {
   
   $('.success, .warning, .attention, notificationz, .error').remove();
   
   if (json['error']) {
    location = json['redirect'];
} 
   
   if (json['success']) {
    $('#notificationz').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
     
    $('.success').fadeIn('slow');
     
    $('#cart-total').html(json['total']);
    
    $('html, body').animate({ scrollTop: 0 }, 'slow'); 
   } 
  }
 });
});

Только вставляйте это в шаблон категории, а не товара.

Comments

[MURZELLO]

Только сегодня заметил "глюк"...
Товар с Вашим примером прекрасно добавляется в корзину, но, с "непонятным количеством"...
К примеру; если открыть в окне быстрого просмотра товар HTC и переключиться на iPhone а потом вернуться назад и добавить HTC в корзину, то в ней появляется "рандомное" количество товара. То 3 штуки, то 7, то 12,... И чем больше ты переключаешься на другой товар и возвращаешься назад - тем больше этого товара потом попадает в корзину при нажатии кнопки "Купить". Все скрипты (которые есть на странице product.tpl я добавил и в product_info.tpl - и безрезультатно...
Как это исправить???

[Дмитрий Евграфович]

Скорее всего цепляет левые товары из родительского окна или еще где-то берет количество. полагаю, надо страницу с товаром или каталог переписывать, чтобы одинаковые переменные не перекрывали друг друга. Если не знаете как, то либо платно у любого фрилансера, либо отказаться от всплывающих окон с товарами.