gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 02:31:05 25 4
gpt4 key购买 nike

我正在将 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>');
}

创建页面时添加 select2:

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

任何帮助将不胜感激!!

最佳答案

听起来您正在页面加载时检测 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: [",", " "] });
}

关于jquery - 动态添加 Select2 字段到表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17129014/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com