javascript - 点击事件时更新API数据

我正在使用这个小图书馆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，以英镑为单位的货币价值便不会触发。

最佳答案

只需将这些代码更改为

$('.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。