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

只需将这些代码更改为

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

Answer 2

如果在更新元素后再次调用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();
});

点击事件时更新API数据

2 个答案: