select2 4.0 を使用していますが、json ファイルからデータをロードすると、作成された要素のどれもselect2:select
イベントを発生させません。イベント委任と関係があると思いましたが、ウェブサイトの例はうまくいくようです。
私は過去1時間、これについて頭を悩ませてきましたが、何が欠けているのか理解できません。
現在、これを使用してアイテムを選択していますが、明らかに機能しません。
$("body").on("click", "#select2-select-results .person-entry", function()
{
var $this = $(this);
var name = $this.data('name');
select2.find('option').val(name).text(name);
});
バインディング$(...).on('select2:select');
は決して発火$(...).on('select2:open);
しませんが、発火します。だから私は何が起こっているのか分かりません。
ただし、データがロードされたときに<option>
タグが作成されていないことに気付きました。
これは、物事を処理している私の JavaScript 全体です。
(function($)
{
"use strict";
var term = null;
var select2 = $("#select");
select2.select2({
allowClear: true,
ajax: {
url: "js/data.json",
dataType: "json",
delay: 250,
data: function(params)
{
// Save the terms for filtering
term = params.term;
return params;
},
processResults: function(data)
{
var people = [];
for(var i = 0; i < data.people.length; i++)
{
var person = data.people[i];
var filter = term || '';
if (person.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
people.push(person);
}
}
return {
results: people
};
}
},
templateResult: function(person)
{
if (person.loading) {
return person.text;
}
var personDetails = '<div class="person-information">' +
'<span class="person-name">' + person.name + '</span>' +
'<span class="person-address">' + person.address + '</span>' +
'</div>';
return '<div class="person-entry" data-name="' + person.name + '"><img src="' + person.image + '" />' + personDetails + '</div>';
},
templateSelection: function(person)
{
return person.name;
},
escapeMarkup: function(markup)
{
return markup
}
});
$("body").on("click", "#select2-select-results .person-entry", function()
{
var $this = $(this);
var name = $this.data('name');
select2.find('option').val(name).text(name);
});
})(jQuery);
誰かが私がここで間違っていることを教えてもらえますか? 私はそれを理解していません。