在表单标签中使用 jquery 动态附加脚本标签不起作用

时间:2021-04-09 18:19:34

标签: javascript jquery append cdn script

我正在编写用于添加付款集成的代码。我的任务是通过 javascript 或 jQuery 动态添加脚本。

当我将脚本标签添加到表单标签中时

var form_tag = $('<form></form>')
$(form_tag).attr('method' , 'POST')
$(form_tag).attr('action' , '')

var script_tag = document.createElement('script')
$(script_tag).attr(
    {
        type : 'text/javascript',
        src : 'https://checkout.razorpay.com/v1/checkout.js',
        'data-key' : 'my_razorpay secret key (absolutly correct)',
        'data-amount' : 7200,
        'data-currency' : 'USD',
        'data-buttontext':'Pay With Razorpay',
        'data-name':'Pro Subscription',
        'data-description' : 'Here will be the Description',
        'data-image' :  'Image link to show',
        'data-prefill.name' : 'myName',
        'data-prefill.email' : 'mymail@gmail.com',
        'data-theme.color' : '#F37254'
    }
)

$(script_tag).attr('data-order_id' , 'order_id(which is absolutly correct)')
$(form_tag ').append(script_tag)
<块引用>

当我将脚本标签附加到表单标签时,它确实附加并显示在元素 DOM (chrome) 中但不起作用,但是当我 通过完美运行的 Chrome Element DOM 复制此标签。

任何人都可以帮助我快速

提前致谢

1 个答案:

答案 0 :(得分:0)

我的问题是通过在将脚本标签附加到表单标签后添加 src 属性来解决的。

之前我遇到错误时发生了什么。

我在添加其他数据属性之前添加了 src。脚本加载但不显示任何响应,因为脚本需要数据属性来执行操作,当属性没有找到它时不显示响应。

解决方案

我之前添加了所有数据属性并将脚本标记附加到表单标记中。之后我添加了 src 属性,这样做解决了我的问题