javascript - 单击事件更新 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/

请注意，在第一次加载时，我们按预期获得了以英镑为单位的货币兑换值(value)，但是一旦我们点击价格 1 或 2，以英镑为单位的货币值(value)就不会触发。

Answer 1

只需将这些代码更改为

$('.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'
    });
});

重要的是再次调用当前的api。