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, что вы добавили новые элементы, вызвав 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();
});