Динамически добавлять поля Select2 в форму

Question

Я использую Select2 с Meteor и Handlebars, и я пытаюсь добавить Select2 <input type="hidden" поля динамически, для использования с Select2. Скрытые поля отображаются, но Select2 регистрирует их.

HTML выглядит так.

{{#each update.ingredients}} 
    <div class="ingredient"> 
    <input class="quant span2" type="text" placeholder="Quantity" value="{{quantity}}"/> 
    <input class="unit span1" type="hidden" placeholder="Unit" value="{{unit}}"/> 
    <input class="ing" type="hidden" placeholder="Ingredient" value="{{ingredient}}"/> 
    </div> 
{{/each}} 

обработчик событий выглядит следующим образом:

'click .addIngredient': function() { 
    $("#input_ingredients").append('<div class="ingredient"><input class="quant span2" type="text" placeholder="Quantity"/><input class="unit span1" type="hidden" placeholder="Unit"/><input class="ing" type="hidden" placeholder="Ingredient"/></div><br>'); 
} 

Выбор2 добавляется при создании страницы:

'click .add': function() { 
    $(".tags").select2({ 
    tags: checkTags(), 
    tokenSeparators: [",", " "] 
    }); 
    $(".ing").select2({ 
    tags: checkIngredients(), 
    tokenSeparators: [",", " "] 
    }); 
    $(".unit").select2({ 
    tags: checkUnits(), 
    tokenSeparators: [","] 
    }); 

Любая помощь будет очень признателен !!

Answer 1

Похоже, вы используете инструменты Select2 при загрузке страницы, но это будет инструмент только тех, которые существуют в то время. Вам нужно использовать те, которые вы динамически добавляете по мере их добавления.

Вы можете попробовать это:

'click .addIngredient': function() { 
    var $div = $('<div class="ingredient"><input class="quant span2" type="text" placeholder="Quantity"/><input class="unit span1" type="hidden" placeholder="Unit"/><input class="ing" type="hidden" placeholder="Ingredient"/></div>'); 
    $("#input_ingredients").append($div).append('<br />'); 
    $div.find('.tags, .ing, .unit').select2({ tags: checkTags(), tokenSeparators: [",", " "] }); 
}