我正在使用 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);
有人可以告诉我我在这里做错了什么吗？我只是不明白。