觸發 JavaScript 生成鏈接問題

Question

當通過 JavaScript 動態添加時，我在觸發此鏈接（觸發 Chargebee 的腳本）時遇到問題。 直接在html中添加時，正常工作。

檢查時，整個生成的鏈接在瀏覽器中正確顯示（填充了變體），只是它不會觸發。

以下是我與此相關的部分：

JavaScript 部分：

var checkout = document.getElementById("checkout");
         
var link = '<a href="javascript:void(0)" data-cb-type="checkout"' + data-cb-1 + data-cb-2 + data-cb-3'>Order</a>';
 
checkout.innerHTML = link;

一個簡單的div：

<div id="checkout"></div>

來自chargebee的腳本：

<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="site-name"></script>

Answer 1

一旦你加載了 chargebee.js 腳本，它就會開始尋找帶有特定data-cb屬性的標簽a 。 該腳本只執行一次。 如果 DOM 中不存在標簽a ，那么腳本什么也不做。 a您稍后添加標簽時，根本沒有效果，因為“發現階段”已經結束。

如果您想更好地控制chargebee初始化過程，您應該為開發人員提供的“通過API結帳”選項提供go。

PS有兩個hacky解決方案：

1. 您可以在將標簽a添加到 DOM 后加載 Chargebee 腳本。

function loadChargebee() {
    var script = document.createElement("script");
    script.src = "https://js.chargebee.com/v2/chargebee.js";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

var checkout = document.getElementById("checkout");
         
var link = '<a href="javascript:void(0)" data-cb-type="checkout"' + data-cb-1 + data-cb-2 + data-cb-3'>Order</a>';
 
checkout.innerHTML = link;

loadChargebee(); // <=== add Chargebee.js

2. 將標簽a留在 DOM 中，照常加載腳本，但在頁面加載后根據需要修改數據屬性：

<a id="beecheckout" href="javascript:void(0)" data-cb-type="checkout" data-cb-1="" data-cb-2="" data-cb-3="">Order</a>

document.getElementById('beecheckout').setAttribute('data-cb-1','new data value');