如何通过 wordpress 中的最新 jquery 在 bootstrap 模式弹出窗口中动态执行 hubspot 嵌入表单脚本？

Question

我有一个 bootstrap 模态弹出窗体，我在其中根据单击的按钮附加 Hubspot 嵌入脚本。下面的代码在最新的 jquery 核心更新

之前完美运行

jQuery(document).ready(function($){
   
    $('.ga-modal-popup .elementor-button,#footer-email').click(function(e){
        e.preventDefault();
        var formId = 'cc3c9892-0a53-488d-9236-ce41a01bd4aee';
        var portalId = '4079114';
        if($( this ).hasClass( "elementor-button" )){
          formId = $('.ga-modal-popup').data("form-id");
          //if portal id deosn't chnage no need to  be assigned here
          portalId = $('.ga-modal-popup').data("portal-id");
        }
      $('#footer-popup .modal-body').empty();
      $('#footer-popup .modal-body').append($('<script/>', {html: "hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});"}));
      $('#footer-popup').modal('show');
    });
});

在最新版本中，问题出在这行代码上$('#footer-popup .modal-body').append($('<script/>', {html: "hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});"})); 如果我像这样使用 'eval' 更改同一行 eval($("#footer-popup .modal-body").append("<script>hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});</script>").text()); 它可以工作，但我不想使用 eval 也不想安装 jquery 迁移插件并使用旧版 jquery.Injecting 通过纯 js 编写的脚本也不起作用。关于如何解决此问题的任何见解？

Answer 1

var newScript = document.createElement("script");
      var inlineScript = document.createTextNode("hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});");
      newScript.appendChild(inlineScript); 
      var target  = document.querySelector("#footer-popup .modal-body");
      target.appendChild(newScript);

这个纯粹的javascript解决了问题

如何通过 wordpress 中的最新 jquery 在 bootstrap 模式弹出窗口中动态执行 hubspot 嵌入表单脚本？

how to dynamically execute hubspot embed form script inside bootstrap modal popup via latest jquery in wordpress?

javascript

wordpress

jquery

bootstrap-modal

hubspot