javascript - 未捕获的 TypeError : Cannot call method 'removeClass' of undefined, 剑道小部件无法正常工作

Question

我正在尝试在我的页面上实现一些 KendoUI Web 小部件，但这些小部件未按预期工作并存在以下问题:

1. Editor 初始化正常，但有一些问题，例如当您悬停时 在它突出显示的选项上，但是当您离开时，它应该得到 恢复正常，但事实并非如此
2. 如果我刷新页面几次 有时Editor初始化得很好，但有时却不然
3. 其他小部件 kendoDatePicker(); 和 kendoDropDownList(); 是 甚至没有初始化
4. 我的 JQ 表单验证也无法在此页面上运行

此外，在 chrome 控制台中我有以下错误 Uncaught TypeError: Cannot call method 'removeClass' of undefined on line # 23679 of kendo.web.js 其中指出:

if (value !== DropDownList.fn.value.call(that)) {
            that.text(that.options.title);
            that._current.removeClass("k-state-selected");//This is line # 23679
            that.current(null);
            that._oldIndex = that.selectedIndex = -1;
        }

我的页面上包含以下脚本:

<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/kndu/kendo.web.js"></script>
…
….

<script>
    $(document).ready(function () {
        $("#editor").kendoEditor({
            tools: [
                "bold",
                "italic",
                "underline",
                "strikethrough",
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull", "insertUnorderedList",
                "insertOrderedList",
                "formatBlock",
                "createLink",
                "unlink",
                "insertImage",
                "insertHtml",
                "viewHtml",
                {
                    name: "customTool",
                    tooltip: "Format as Code",
                    exec: function (e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("inserthtml", { value: "<pre>" });
                    }
                }],

        });
        $("#date").kendoDatePicker();
        $("#categry").kendoDropDownList();


        $("#newpost").validate({
            rules: {
                ttle: {
                    maxlength: 150,
                    required: true,
                    onlyChars: true
                },
                smmry: {
                    maxlength: 250,
                    required: true
                },
                editor: {
                    maxlength: 35,
                    required: true
                },
                categry: {
                    required: true
                }
            }
        });
    });
    $.validator.addMethod('onlyChars', function (value) {
        return /^[a-zA-Z ]+$/.test(value);
    }, 'Please enter a valid name with only alphabets');
</script>

Answer 1

关于insertHTML文档在here中说:

the insertHtml tool requires a collection of text-value pairs. A separator may be included multiple times.

所以你应该有这样的东西:

$("#editor").kendoEditor({
    tools: [
        ...
        "insertHtml",
        ...
    ],
    insertHtml: [
        { text: "label 1", value: "<p>snippet 1</p>" },
        { text: "label 2", value: "<p>snippet 2</p>" }
    ]
});