Почему при смене товара ajax продолжает работать с предыдущим объектом?

Question

[ligisayan]

Всем привет!
Есть магазина woocommerce. На странице сайта при каждом нажатии кнопки id="change" заменяю один товар на другой и наоборот, которые задаю, как в коде ниже или через шорткод.

При добавлении товара в корзину всплывает модальное окно с товаром, которое сигнализирует, что он добавлен.

<?php echo do_shortcode( '[add_to_cart id="21"]' ); ?>

<div id="order-wrapper"><a href="shop/?add-to-cart=21" data-quantity="1" class="btn btn-primary product_type_simple add_to_cart_button ajax_add_to_cart order" data-product_id="21" aria-label="Добавить в корзину" rel="nofollow">Заказать</a></div>
<button id="change">Изменить</button>

$('.add_to_cart_button').on('click', function() {
  $('#modal-cart').modal('show');
});
$('#change').on('click', function() {
  var attr = $('.order').attr("data-product_id");
  if (attr == "21") {
    $('.order').attr("href", "shop/?add-to-cart=42");
    $('.order').attr("data-product_id", "42");
    //$( "#order-wrapper" ).empty();
    //$( "#order-wrapper" ).append('<a href="shop/?add-to-cart=42" data-quantity="1" class="bt btn-primanry product_type_simple add_to_cart_button ajax_add_to_cart order" data-product_id="42" aria-label="Добавить в корзину" rel="nofollow">Заказать</a>' );
  } else {
    $('.order').attr("href", "shop/?add-to-cart=21");
    $('.order').attr("data-product_id", "21");
    //$( "#order-wrapper" ).empty();
    //$( "#order-wrapper" ).append('<a href="shop/?add-to-cart=21" data-quantity="1" class="bt btn-primanry product_type_simple add_to_cart_button ajax_add_to_cart order" data-product_id="21" aria-label="Добавить в корзину" rel="nofollow">Заказать</a>' );
  }
});

Товары меняются, все бы хорошо, но есть проблема связанная с ajax.

Если добавить в корзину первый товар, нажать на кнопку изменить и добавить уже другой (как показывает содержимое кнопки id и ссылка уже изменились), то в корзине окажется 2 штуки первого товара, а не первый и второй.

Если после смены товара обновить страницу, то товары добавятся разные, как и должно быть, поэтому проблема связана именно с ajax - он работает с первой копией до перезагрузки.

Если управлять кнопками заказа с помощью функций empty() и append() как я показал в комментариях в коде выше, то ajax уже работает с разными экземплярами объекта и добавляет разные товары в корзину, как и положено, но перестает уже всплывать модальное окно, т.к. изначально в DOM новых объектов не было..

Как разрешить вопрос?

Comments

[ThunderCat]

теги хтмл в одну линию - это тенденция сейчас такая? Нифига же не понятно, вам самому удобно эту кашу разгребать?

Где ваша отправка аяксом, как вы и что там делаете?

[tyzberd]

но перестает уже всплывать модальное окно, т.к. изначально в DOM новых объектов не было..

Это решается повторным навешиванием события, или использованием делегированных событий api.jquery.com/on/#direct-and-delegated-events

$(document ).on( "click", ".add_to_cart_button", function() {
  console.log( $( this ) );
});

[ligisayan]

ThunderCat, нуу, ничего значимого в в этих тегах просто не было