Question

我在点击树视图中的链接时创建标签。在选项卡中，还创建了两个其他选项卡，其中包含转换为CodeMirror的textareas。在创建CodeMirror实例时，我遇到了很多问题，而且我的问题通常是.refresh()事件。

CodeMirror没有完全加载到未激活的选项卡中，因此我在创建实例时添加了一些更改，并将它们全部收集到数组中，稍后我将在代码中循环使用{ {1}}以便CodeMirror编辑器完全加载。

在我这样做之前，CodeMirror被添加到我在click上创建的所有选项卡中的所有textareas，但是我总是刷新所有CodeMirror实例，而不仅仅是新选项卡中的实例。这导致在另一个标签中输入的值清除。

因此，对于新的更改，我只刷新在新选项卡中创建的当前CodeMirror实例。但是现在有了这个更改CodeMirror仍然打开的所有旧选项卡（顺便说一下，标签可以关闭）消失了。所以现在我想知道，.refresh()刷新整个页面吗？

以下是我的代码的一部分，即创建CodeMirror实例的部分。我不认为创建标签的代码与此功能失调有关：

/ *添加CodeMirror以转换所有文本框，需要超时直到加载所有dom元素* /

CodeMirror.refresh()

我必须在setTimeout函数中使用代码来等待textareas的创建。该功能位于点击事件中。

是否有人可以指出可能导致CodeMirror在旧版标签中从Dom中消失的原因？可能是setTimeout(function () { var textAreaId = 0; $(".AI-textarea").each(function () { $(this).attr("id", "text" + textAreaId); ++textAreaId; }); var queryArr = []; var dimensionArr = []; var queryBuilder = $(tabPanelDiv).find(".QueryBuilder"); queryBuilder.each(function (index, el) { var editorQuery = CodeMirror.fromTextArea(el, { lineNumbers: true, tabMode: "indent", mode: "text/x-sql", theme: "eclipse" }); queryArr.push(editorQuery); }); var dimensionBuilder = $(tabPanelDiv).find(".DimensionBuilder"); dimensionBuilder.each(function (index, el) { var editorQuery = CodeMirror.fromTextArea(el, { lineNumbers: true, tabMode: "indent", mode: "text/x-sql", theme: "eclipse" }); dimensionArr.push(editorQuery); }); for (var i = 0; i < queryArr.length; i++) { queryArr[i].refresh(); } for (var a = 0; a < dimensionArr.length; a++) { dimensionArr[a].refresh(); } }, 100);事件或点击事件是否做了我不知道的事情？在创建新选项卡时，最后一个CodeMirror实例是否会丢失？

下面是两个标签的屏幕截图，第一个显示了全新标签的外观。第二个显示了看起来相同的旧选项卡的外观。

修改

这是完整的点击事件，如果有帮助，可能在代码中有一些事先导致这个？我为混合javascript和jquery道歉，可能要做一些重写。

CodeMirror.refresh()

Answer 1

我发现导致CodeMirror旧实例消失的原因。这是因为我在jQuery .each()中加载了表单，它循环遍历所有具有这些表单的div。我将负载移到了外面并修复了它。

旧代码：

    var pId = 0;
    $(".query-dimsension-tabs-content").each(function () {
        $(this).find(".tab-pane").each(function () {
            $(this).attr("id", "tab" + pId);
            ++pId;
        });

        if (!($.contains($(this), "form"))) {
            var firstPane = $($(this).children()[0]);
            var secondPane = $($(this).children()[1]);
            firstPane.load("/Webfront/QueryBuilder");
            secondPane.load("/Webfront/DimensionBuilder");
        }           
    });

新守则：

    var pId = 0;
    $(".query-dimsension-tabs-content").each(function () {
        $(this).find(".tab-pane").each(function () {
            $(this).attr("id", "tab" + pId);
            ++pId;
        });           
    });

    var formToLoad = $($(tabPanelDiv).children()[1]);
    var firstPane = $($(formToLoad)[0].firstChild);
    var secondPane = $($(formToLoad)[0].lastChild);
    firstPane.load("/Webfront/QueryBuilder");
    secondPane.load("/Webfront/DimensionBuilder");

如果有人对如何在jQuery中以不同的方式动态加载这些局部视图有推荐或想法，那将是值得赞赏的。我认为这可能不是最好的方式。

jQuery，bootstrap选项卡和CodeMirror.refresh（）

1 个答案: