云海绵异步javascript

请有人帮忙，我正在尝试将CloudSpine电子邮件小部件集成到引导模式中

模态的HTML如下所示：

<div class="modal fade" id="invite">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-warning"></i> Invite friends </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Select how you would like to send an invitation</p>
            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

$(document).on("hidden.bs.modal", function (e) {
    var activeElement=$(document.activeElement);

    if(activeElement.is(".invite")){
        excludeCloudSponge();
        $("#invite .modal-footer").empty();
    }
});

function includeCloudSponge() {
        first_script = document.getElementsByTagName("script")[0];
        s=\'<script type="text/javascript" src="//api.cloudsponge.com/widget/2xxxxxxxxxxxxxxxxxxxxxxx.js">\';
        $(s).insertBefore(first_script);
}

function excludeCloudSponge() {
    //var script=\'script[src="//api.cloudsponge.com/widget/2xxxxxxxxxxx.js"]\';
    //$(script).remove();

}

function email(){
    var wrapper= document.createElement("div");
    var ea = document.createElement("a");
    ea.setAttribute("class", "cloudsponge-launch");
    ea.innerHTML="Add from Address Book";
    var et=document.createElement("textarea");
    et.setAttribute("class", "cloudsponge-contacts");
    wrapper.append(ea);
    wrapper.append(et);
    return wrapper;
}

$(".invite").click(includeCloudSponge);

javascript函数如下所示：

<div class="modal fade" id="invite">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-warning"></i> Invite friends </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Select how you would like to send an invitation</p>
            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

$(document).on("hidden.bs.modal", function (e) {
    var activeElement=$(document.activeElement);

    if(activeElement.is(".invite")){
        excludeCloudSponge();
        $("#invite .modal-footer").empty();
    }
});

function includeCloudSponge() {
        first_script = document.getElementsByTagName("script")[0];
        s=\'<script type="text/javascript" src="//api.cloudsponge.com/widget/2xxxxxxxxxxxxxxxxxxxxxxx.js">\';
        $(s).insertBefore(first_script);
}

function excludeCloudSponge() {
    //var script=\'script[src="//api.cloudsponge.com/widget/2xxxxxxxxxxx.js"]\';
    //$(script).remove();

}

function email(){
    var wrapper= document.createElement("div");
    var ea = document.createElement("a");
    ea.setAttribute("class", "cloudsponge-launch");
    ea.innerHTML="Add from Address Book";
    var et=document.createElement("textarea");
    et.setAttribute("class", "cloudsponge-contacts");
    wrapper.append(ea);
    wrapper.append(et);
    return wrapper;
}

$(".invite").click(includeCloudSponge);

---

问题是，每当用户第一次单击按钮时，脚本都会被包含，小部件也会工作。但是，当我关闭模式并重新打开小部件时，小部件将不再打开。

当CloudScribe小部件脚本添加到页面时，它会将单击处理程序附加到初始页面加载后找到的任何匹配元素上。它不知道在此初始化之后添加的元素，因此应用程序代码需要通过以下两种方式之一来说明这一点

首先也是最简单的一点，您可以通过调用cloudspined.init让cloudspined对象知道您已经添加了新元素，传入任何参数都不会使选项保持不变。小部件初始化的一部分将一个单击处理程序附加到它找到的所有.cloudscape启动元素。这是最简单的方法；在创建新元素之后，它只是一条直线

// ... add a new .cloudsponge-launch element, then let the cloudsponge object attach
//  the click handler to the new element(s)
cloudsponge.init()

或者，您可以通过附加到新创建元素的单击事件来应用启动功能。如果需要围绕同一单击事件添加自己的应用程序逻辑，则可以选择这样做。下面是使用jQuery的一个基本示例：

// ... add a new element that is meant to launch the cloudsponge widget,
//  then attach a click handler to launch the widget
$('.new-link-to-launch-cloudsponge').click(function(e) {
  cloudsponge.launch();
  // insert your own application logic here
  e.preventDefault();
});

---

我理解只在需要时加载CloudScribe javascript。但是为什么在模式关闭时要从页面中删除小部件脚本呢？嗨，格雷姆，好的，我已经从脚本中删除了删除部分。当模式重新打开时，我仍然无法打开小部件。我认为删除并重新包含脚本标签可能会让它工作。你是如何启动这个小部件的？我没有看到class=cloudspinelaunch的元素，也没有看到对cloudspined.launch的任何调用。我有一个函数在打开模式时被调用。我已经把它包括在上面-功能电子邮件。当模态被隐藏时，元素会被移除。谢谢，格雷姆选择了第一个选项，工作起来很有魅力