Question

我正在处理的网站有很多模态弹出窗口。

每个弹出窗口中都有大约50个字段/输入，图像和其他自定义元素。因此，简单的表单重置$("#formId")[0].reset()无法正常工作（因为它不会删除图像并重置由其他开发人员创建的自定义元素）。

我的解决方案背后的理论。

基本上我创建了一个函数，它会从每次模态关闭时从最初加载的include文件重新加载模态弹出窗口。它从添加到名为data-url的每个模态弹出窗口的属性中获取文件的URL。

然后该函数获取模态弹出窗口的代码并将其替换为新代码。这样，模态弹出窗口再次为空，就好像从未打开过一样。

以下代码用于重置模态。最初在文档加载register_website_components()函数时运行，将函数绑定到页面上的所有模态。然后，它使用一个名为modal_close_trigger的函数将其自身重新添加到新的模态代码中。

问题在于，如果您关闭了模态，它会重新加载两次。

IE：在chrome开发人员工具中，我可以看到2个单独的请求为相同的模式弹出窗口加载相同的代码。

我想unbind以前的关闭功能并重新添加。

function reset_modal(modal_id, modal_url) {
    $.ajax({
        type: "GET",
        url: modal_url,
        data: "",
        contentType: false,
        cache: false,
        processData: false,
        beforeSend: function(){
            $("[data-toggle=modal][data-target="+modal_id+"]").attr("disabled","disabled");
            $(modal_id + " .modal-body").html(loading_bar());
            $(modal_id + " .modal-footer").html("");
        },
        success: function (data) {
            $(modal_id).replaceWith(data);
            // This is the function that I want to unbind.
            $(modal_id).on("hidden.bs.modal", function () {
                var modal_parent = $(modal_id).parent();
                $(modal_id).remove();
                $(modal_parent).append(data);
                register_website_components();
                modal_close_trigger(modal_id, modal_url);
            });
            $(modal_id).modal("hide");
            $("[data-toggle=modal][data-target="+modal_id+"]").removeAttr("disabled");
        }
    });
}

loading_bar()只是一个加载Bootstrap Progress栏的函数。

function loading_bar() {
    $process_bar_id = guid();
    var $process_bar = "<div class='col-lg-12' id='" + $process_bar_id + "'>";
    $process_bar = $process_bar + "<div class='progress'>";
    $process_bar = $process_bar + "<div class='progress-bar progress-bar-success progress-bar-striped active process-bar' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width:100%'></div>";
    $process_bar = $process_bar + "</div>";
    $process_bar = $process_bar + "</div>";
    $process_bar = $process_bar + "</div>";
    return $process_bar;
}

modal_close_trigger()只是重置模态触发器的代码，但代码可以在下面找到。

function modal_close_trigger(modalId, modalURL) {
    $(modalId).on("hidden.bs.modal", function () {
        reset_modal(modalId, modalURL);
    });
}

register_website_components()是一个在页面准备好运行脚本时最初运行的函数。此功能将各种其他功能绑定到网站上的各种组件。

在传统的jQuery中，你有unbind元素中现有函数的几个选项。示例可以是found here (jQuery API Documentation)。

我看了下面的函数，但我不知道如何将它绑定到模态关闭事件。

var handler = function() {
  alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );

模态关闭代码来自from here (Bootstrap API Documentation)。

我需要知道如何unbind此代码：$(modal_id).on("hidden.bs.modal")或如何使用上述示例bind / unbind使用处理程序的函数对于模态弹出窗口。

Answer 1

您可以使用.off

类似于：$( "#foo" ).off( "click", handler );

This answer is similar

取消绑定Bootstrap Modal关闭

1 个答案: