动态插入的Kendo tabStrip选项卡未加载内容div

时间:2013-10-10 11:08:41

标签: javascript jquery asp.net-mvc tabs kendo-ui

我正在尝试在Kendo中创建一个“添加标签”标签,该标签会添加到选择下拉列表时创建的tabStrip中。使用Ajax加载的初始数据显示正常,但用户添加的选项卡不显示。

它应该在tabStrip中插入一个标签(它确实如此),但是当我尝试初始化它包含的Kendo编辑器时,我得到一个“未定义”的错误 - 这是因为相关的内容元素应该包含我的编辑器不会与新选项卡一起创建。

选择下拉列表时会发生这种情况:

$('#questionEditor').remove();                                                 //Remove and create the question editor tabs
                $('body').append('<div id="questionEditor"></div>');
                $('#questionEditor').kendoTabStrip();

                var tabStrip = $('#questionEditor').data('kendoTabStrip');

                var count = 0;                                                                //Count the amount of tabs
                for (var i = 0 ; i < returndata.questions.length; i++) {
                    var editor = '<div id="questionText' + i + '"></div>';

                    tabStrip.append([{ text: "Question " + (i + 1), content: editor }]);

                    var textEditor = '#questionText' + i;
                    $(textEditor).kendoEditor();
                    $(textEditor).data('kendoEditor').value(returndata.questions[i].QuestionText);

                    count++;
                }

                tabStrip.append([{ text: "Add Question", spriteCssClass: "k-add k-icon" }]);
                var lastChild = tabStrip.tabGroup[0].lastChild;
                $(lastChild).click(function () {                                                                        //New tab
                    var editor = '<div id="questionText' + count + '"></div>';
                    tabStrip.insertBefore([{ text: "Question " + (count + 1), content: editor }], $(lastChild));

                    var textEditor = '#questionText' + count;
                    $(textEditor).kendoEditor();
                    count++;
                });

但点击后新标签不会显示任何内容。在jQuery ajax对象中有什么东西不起作用吗?

1 个答案:

答案 0 :(得分:0)

这是一种hacky解决方案,但问题是我的“添加新选项卡”选项卡没有contentHolder - 所以我在初始化时添加了一个内容属性,只是禁用了它。