javascript - 在 igEditor 中输入基本元素时 listItems 不起作用

Question

我动态添加文本字段

var input = $('<input class="EditorFields" id="textfield"/>');
$(input).igEditor({
                width: 140,
                required:true
            });

这工作正常。 但是当我尝试添加 listItems 属性时，它不起作用。

$(input).igEditor({
                width: 140,
                required:true,
                listItems : ["red","blue","yellow"]
            });

我不想更改要选择的基本元素。 请帮忙。

Answer 1

首先要做的事情 - Ignite UI jQuery API docs声明按钮选项默认为无 - 如果您想要一个下拉菜单，请添加以下内容:

button : "dropdown",

为什么这仍然不起作用？如果您不了解动态控件的详细信息，动态添加动态控件有时会很棘手。对于 jQuery 来说也是如此，这是人们经常错过的事情 - jQuery 在文档片段中创建项目，因此您需要小心如何将它们附加到 DOM。

当您提供 INPUT 元素并请求复杂的编辑器时，控件的附加项目(按钮、下拉菜单、验证消息等)将围绕该输入构建，并且整个内容都包装在容器 SPAN 中。因为您引用输入并且它第一次工作，所以我假设您直接附加它。基本上，当您创建一个复杂编辑器并随后使用相同的输入引用附加到 eh DOM 时，您会将所有额外的标记留在文档片段中。

我可以想到大约 3 种方法来使其发挥作用，您可以选择最适合您需求的方法:

1) 首先追加项目，以便编辑器随后可以在 DOM 中正确初始化:

var input = $('<input class="EditorFields" id="textfield"/>').appendTo("body");

2) 如果可能的话，提供容器，而不是输入:

var input1 = $('<span class="EditorFields" id="textfield1"/>');

3) 当您知道自己有父级时，选择父级并将其附加:

 $(input2).igEditor({
        width: 140,
        required: true,
        listItems: ["red2", "blue2", "yellow2"],
        button: "dropdown"
    }).parent().appendTo("body");

这是一个包含所有这些内容的 JSFiddle:http://jsfiddle.net/damyanpetev/ZRqb2/