jquery - 动态添加 Select2 字段到表单

Question

我将 Select2 与 Meteor 和 Handlebars 一起使用，并尝试<input type="hidden"动态添加 Select2 字段以与 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: [","]
  });

任何帮助将不胜感激！

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: [",", " "] });
}