javascript - 在 Bootstrap Modal Close 上取消绑定(bind)现有功能

Question

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

每个弹出窗口在正文中有大约 50 个字段/输入、图像和其他自定义元素。出于这个原因，一个简单的表单重置 $("#formId")[0].reset() 将不起作用(因为它不会删除图像并重置由创建的自定义元素另一个开发者)。

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

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

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

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

问题是，如果您关闭了模式，它会重新加载两次。

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

我想取消绑定(bind)之前的关闭函数，然后重新添加。

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 进度条的函数。

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() 是一个在页面准备好运行脚本时初始运行的函数。此功能将各种其他功能绑定(bind)到网站上的各种组件。

在传统的 jQuery 中，您有多个选项可以从元素中解除绑定(bind)现有函数。示例可以是 found here (jQuery API Documentation) .

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

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) .

我需要知道如何取消绑定(bind)此代码:$(modal_id).on("hidden.bs.modal") 或者我如何使用上面的示例使用模式弹出窗口的处理程序来绑定(bind)/取消绑定(bind)函数。

Answer 1

您可以使用 .off

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

This answer is similar