Question

我知道这是一个经常讨论的问题。但没有一个答案是令人满意的。

隐藏后，我无法重置/重新初始化引导程序模式。

正如其他一个主题中所建议的那样，我有以下代码：

$('#myModal').on('hidden', function() {
    $(this).data('modal', null);
});

在此之后，如果再次显示模态，则上一个节目中添加的内容仍然存在。

以下是展示问题的jsfiddle link：

首次显示模态后，如果单击“保存更改”，则会向模态添加一些动态元素。
然后，如果单击关闭按钮，则会隐藏模态。
如果再次调用modal，它会显示在上一次调用期间动态添加的元素。

重置此模式的最佳方法是什么。

如前所述，以下代码似乎不起作用：

$(this).data('modal', null);

其他替代方法是手动将字段重置为原始状态。

然而，在我的实际应用中，我正在为模态创建许多动态和复杂的元素，因此重置的选项很繁琐。

Answer 1

模态不知道您的输入字段。您需要手动清除隐藏事件中的那些：

$('#myModal').on('hidden', function() {
    $('inputEmail').val(null);
});

您可以为引导模式创建一个自定义包装器，在其中为其提供要清除的jQuery对象数组：

var myModal = function (id, inputs) {
    $(id).on('hidden', function () {
        $.each(inputs, function(i, input) {
            input.val(null);
        });
    });
    return $(id).modal();
};

这只是一个粗略的想法......

最好的方法是使用JavaScript框架，如Knockout.js，Angular.js，Backbone.js或其他。他们可以真正帮助您解决类似的事件问题。

bootstrap modal如何销毁

1 个答案: