条纹元素被破坏

如何解决条纹元素被破坏

我有这个 javascript 代码，它用一个 div 动态地创建一个模态，其中条带加载它的元素 div 以保存我的客户卡详细信息。由于它们可以显示和隐藏模态，我决定将回调挂钩到模态的隐藏事件中并将其从 dom 中删除。这意味着每次用户单击按钮添加新的付款方式时，他都会将一个新的模态添加到 dom 中。 此外，为了防止同一页面上相同类型的重复条纹元素，我销毁了“元素”。第一次尝试时一切正常，但每次尝试“销毁”元素后，stripe 都会抛出一个异常，表示元素已被销毁.. 代码如下：

static createNewPaymentMethod() {
    var stripe = Stripe("My_Publishable_Key");

    var modal = "<DIVS_WITH_THE_MODAL>";

    $("body").append(modal);
    $("#ID_OF_THE_MODAL").modal("show");

    var elements = stripe.elements();
    var stripeCardElement = elements.create('card');

    stripeCardElement.mount('#ID_OF_THE_MODAL .card-element');

    $(document).on("hidden.bs.modal","#ID_OF_THE_MODAL",function(){
        stripeCardElement.destroy();
        $("#ID_OF_THE_MODAL").remove();
    });
}

我尝试将对变量 stripeCardElement 的调用更改为 elements.getElement('card') 和然后调用 destroy ，但与第一次尝试一样，该调用在第一个模态显示后返回 null...

解决方法

只是一个快速修复，我将 stripeCardElement.destroy(); 更改为 stripeCardElement.unmount(); 它似乎有效，但我有点认为我的编码方式实际上更好.. 不知道 Stripe JS api 内部的方法是否有一些差异..