触发 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');