javascript - Cloudsponge异步JavaScript

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

模态的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>

javascript函数如下：

$(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);

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

最佳答案

将CloudSponge小部件脚本添加到页面后，它将单击处理程序附加到在初始页面加载后找到的任何匹配元素。在初始化之后，它对添加的元素一无所知，因此您的应用程序代码需要使用以下两种方法之一对此进行说明。

首先，也是最简单的方法，可以通过调用cloudsponge来让cloudsponge.init()对象知道您已添加了新元素（不传递任何参数将使选项保持不变）。小部件初始化的一部分将单击处理程序附加到它找到的所有.cloudsponge-launch元素。这是最简单的方法。创建新元素后，它只是单线。

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

或者，您可以通过附加到新创建的元素的click事件来自己应用启动功能。如果需要在同一单击事件周围添加自己的应用程序逻辑，则可以选择执行此操作。这是使用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();
});