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

Я использую Select2 с Meteor и Handlebars и пытаюсь динамически добавлять Select2 <input type="hidden"fields для использования с 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>');  
}

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

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

Любая помощь будет очень высоко ценится!!


jquery meteor jquery-select2
person Daniel Bernhard    schedule 15.06.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Похоже, вы инструментируете свои элементы 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: [",", " "] });
}
person John S    schedule 16.06.2013
comment
Это сделало это, @John S. Большое спасибо! - person Daniel Bernhard; 16.06.2013