Обновление данных API по событию клика

Question

Я использую эту маленькую библиотеку https://github.com/frmlnd/frmlnd-current, чтобы добавить цену корзины в другой валюте.

Вот как мы отображаем значение цены в другой валюте:

<span class="crrnt-currency inline" data-crrnt-base="USD" data-crrnt-currencies="GBP">$100</span>

Все работает хорошо!

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

Нажмите код

$('.payment-option').on('click', 'label', function (e) {
    e.preventDefault();
    $('.order-summary .inner p').html($(this).data('product'));
    $('.order-summary .total .right').html('<span class="crrnt-currency click" data-crrnt-base="USD" data-crrnt-currencies="GBP">' + $(this).data('amount') + '</span>');

});

Что нужно сделать?

Здесь я поместил демонстрационный пример проблемы https://jsfiddle.net/mironomadic/hw1cbz0t/1/

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

Answer 1

Работает, если вы снова вызываете API после обновления элемента:

const updateCurrencies = () => {
    $('.crrnt-currency').current({
      api: 'https://openexchangerates.org/api/latest.json?app_id=6851e9a79b90414b8a35d3776790f60d'
    });
};
$('.payment-option').on('click', 'label', function (e) {
    e.preventDefault();
    $('.order-summary .inner p').html($(this).data('product'));
  const newE = '<span class="crrnt-currency inline" data-crrnt-base="USD" data-crrnt-currencies="GBP">' + $(this).data('amount') + '</span>'
    $('.order-summary .total .right').html(newE);

    updateCurrencies();
});


jQuery(document).ready(function ($) {
    updateCurrencies();
});

Answer 2

Просто измените эти коды на

$('.payment-option').on('click', 'label', function (e) {
    e.preventDefault();
    $('.order-summary .inner p').html($(this).data('product'));
    $('.order-summary .total .right em').empty().html(`<span class="crrnt-currency inline" data-crrnt-base="USD" data-crrnt-currencies="GBP">${$(this).data("amount")} </span>`);
$('.crrnt-currency').current({
        api: 'https://openexchangerates.org/api/latest.json?app_id=6851e9a79b90414b8a35d3776790f60d'
    });
});

Важно снова вызвать current api.