Cloudsponge 异步 javascript

Question

请有人帮忙，我正在尝试将 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);

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

Answer 1

当 CloudSponge 小部件脚本添加到页面时，它会将点击处理程序附加到它在初始页面加载后找到的任何匹配元素。它不知道此初始化后添加的元素，因此您的应用程序代码需要以两种方式之一来解决这个问题。

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

// ... 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();
});

Cloudsponge 异步 javascript

Cloudsponge asynchronous javascript

javascript

jquery

asynchronous

cloudsponge