Javascript значение обновляется только один раз

Question

Я работаю над добавлением товара в корзину. Пока что я могу выбрать количество, оно меняет значение количества данных в моей кнопке «Добавить в корзину», и когда я нажимаю кнопку, оно должно сериализовать атрибуты данных и отправлять их на мой сервер с помощью вызова ajax. Ради этого вопроса я опущу вызов ajax и предупрежу только сериализованные данные.

Когда я изменяю количество, значение обновляется в атрибуте количества данных кнопки. Поэтому, если я нажму «Добавить в корзину», он отобразит правильное количество.

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

Как мне это исправить?

Код ниже:

$('.qtyBox').on('change', function(e){
  $(this).closest(".row").find('a').attr('data-quantity', $(this).val());
});

//Login User
$(".addToCart").click(function() {
  let data_array = new Array();

  let item = {};
  item['data-shop'] = $(this).data('shop');
  item['data-prod'] = $(this).data('prod');
  item['data-qty'] = $(this).data('quantity');

  data_array.push(item);
  let serialized = JSON.stringify(data_array);

  alert(serialized);
});


<div class="row">
    <div class="col s12 m6">
        <input class="qtyBox" type="number" name="productQty" value="1" min="1" max="3">
    </div>
    <div class="col s12 m6">
        <a data-shop="<?= $product['s_id'] ?>" data-prod="<?= $product['product_id']  ?>" data-quantity="3" class="modal-trigger waves-effect btn-small orange darken-2 text-normal action-btn right addToCart">Add to Cart</a>
    </div>
</div>

Answer 1

Это потому, что, хотя метод jQuery .data() может читать HTML5 атрибуты данных, он фактически использует внутреннее хранилище для установки значения. Поэтому вы должны использовать .data('quantity', <val>) для установки значения:

$('.qtyBox').on('change', function(e){
  $(this).closest(".row").find('a').data('quantity', $(this).val());
});