1

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

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

4

1 回答 1

3

当 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()

或者，您可以通过附加到新创建元素的单击事件来自己应用启动功能。如果您需要围绕同一个点击事件添加自己的应用程序逻辑，您可以选择这样做。这是一个使用 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();
});
于 2018-07-04T17:03:43.550 回答