JQuery LocalStorage не стреляет с первого клика

Question

Когда я нажимаю print-receipt, я хочу изменить класс дочернего div на receipt_finished. Затем я заменяю элемент localStorage новым содержимым html (содержащим класс receipt_finished).

HTML

<div id="1" class="print-receipt no-print page-break printed">
    <div class="receipt_content"><span>1</span></div>
    </div>

Jquery

$(document).on('click', '.print-receipt', function (e) {
            e.preventDefault();
            var receipt_id = $(this).attr('id');
            var receipt_html = $(this).html();
            $(this).find('.receipt_content').toggleClass("receipt_finished");
            localStorage.setItem('printer_' + printer_id + '_receipt_' + receipt_id, receipt_html);
            });

Когда я впервые обновляю страницу, toggleClass работает нормально, но localStorage.setItem работает только при втором щелчке . Таким образом, код работает следующим образом:

Первый клик div:

В html изменяется на <div class="receipt_content receipt_finished">

В localStorage ничего не происходит

На втором клике:

В html изменяется на <div class="receipt_content">

В localStorage изменяется на <div class="receipt_content receipt_finished">

Элемент уже существует в localStorage, когда страница загружается или создается до этого события щелчка.

Answer 1

Измените порядок переключения класса и получения html, чтобы при получении html он включал изменение класса

$(document).on('click', '.print-receipt', function(e) {
  e.preventDefault();
  var receipt_id = $(this).attr('id');
  // toggle the class first
  $(this).find('.receipt_content').toggleClass("receipt_finished");
  // html will now have the class change
  var receipt_html = $(this).html();

  localStorage.setItem('printer_' + printer_id + '_receipt_' + receipt_id, receipt_html);
});