附加元素上的Selectize.js

Question

我目前正在嘗試通過單擊具有“添加”類的按鈕將新元素添加到父元素。 我希望這些附加的元素在附加后獲得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。

Answer 1

這是一個工作小提琴

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外，我還添加了一個稱為elements的通用類。
2. 這行var lastSelectize = selectizeWrapper.find('.elements').last(); 應該在您添加新的html selectizeWrapper.append(newSelectize);之后執行selectizeWrapper.append(newSelectize); ; 否則沒有用。