关于附加元素的Selectize.js

时间:2014-05-23 04:24:10

标签: javascript jquery html selectize.js

我目前正在尝试通过点击一个"添加"类的按钮来添加新元素。给父母。我希望这些附加元素在被追加后获得selectize.js的功能,但不知何故它不起作用。这是我的javascript代码:

$('.add').click(function(){
var newSelectize = '<select id="input-tags"></select>';
var selectizeWrapper =$(this).parent().find('.selectize-wrapper');
var lastSelectize = selectizeWrapper.find('#input-tags').last();

selectizeWrapper.append(newSelectize);
lastSelectize.selectize({
     delimiter: ',',
    persist: false,
    maxItems: 1,
    options: items,
    labelField: "item",
    valueField: "item",
    sortField: 'item',
    searchField: 'item'
    });
});

以下是我的示例JSFiddle.

1 个答案:

答案 0 :(得分:0)

这是 Working Fiddle

<强> HTML:

<div class="demo">
    <div class="selectize-wrapper">
        <input type="text" value="test" class="elements demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
    </div>

    <input type="button" value="Add" class="add">
</div>

<强> JS:

$('.add').click(function(){
var newSelectize = '<select id="input-tags" class="elements"></select>';
var selectizeWrapper =$(this).parent().find('.selectize-wrapper');


selectizeWrapper.append(newSelectize);
var lastSelectize = selectizeWrapper.find('.elements').last();
console.log(lastSelectize);
lastSelectize.selectize({
     delimiter: ',',
    persist: false,
    maxItems: 1,
    options: items,
    labelField: "item",
    valueField: "item",
    sortField: 'item',
    searchField: 'item'
    });
});

评论

  1. 我添加了一个名为元素的公共类,而不是类似的ID。
  2. 在您添加新的html lastSelectize = selectizeWrapper.find('.elements').last();后,应该执行行变量selectizeWrapper.append(newSelectize);;否则没用。