Я использую select2 4.0, и когда я загружаю данные из файла json, ни один из созданных элементов не запускает событие select2:select
. Я думал, что это как-то связано с делегированием событий, но примеры на веб-сайте, похоже, работают нормально.
Я ломал голову над этим в течение последнего часа, и я просто не понимаю, чего мне не хватает.
Прямо сейчас я использую это для выбора элемента, но это, очевидно, не работает:
$("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);
Может кто-нибудь сказать мне, что я делаю неправильно здесь? Я просто не понимаю.