我正在寻找一种将点击事件附加到 select2-result-item 的方法。我已经通过以下方式格式化了结果和选择
function format(state) {
if (!state.id) return state.text; // optgroup
return state.text + " <i class='info'>link</i>";
}
添加一个“信息”图标我现在试图将一个简单的点击事件附加到 .info-element 但无法让它工作：
$('.info').on('click', function(event){
event.preventDefault();
alert("CLICK");
$('#log').text( "clicked" );
});
有什么帮助吗？有类似问题的人吗？这可能吗？
我在以下位置准备了一个 jsFiddle：http : //jsfiddle.net/s2dqh/3/
因为 Select2 lib 阻止了弹出列表上的任何点击事件，所以您不能.info直接将事件绑定到。但是您可以重新定义onSelect方法并在其中放置您想要的任何代码。
参见示例：http : //jsfiddle.net/f8q2by55/
多选更新：http : //jsfiddle.net/6jaodjzq/
这与netme的概念相似，但select2事件错误（可能是版本差异），您需要使用stopPropagation来防止项目被选中：
$('#mySelect2').on('select2-open', function() {
$('.select2-results .info').on('mouseup', function(e) {
e.stopPropagation();
console.log('clicked');
});
});
如果与 x-editable 一起使用。这是当 x-editable 进入编辑模式（显示的事件）时，即存在 select2 并且您可以连接到它的打开功能时。
$('#myXEditable').on('shown', function () {
$(this).data('editable').input.$input.on('select2-open', function() {
$('.select2-results .info').on('mouseup', function(e) {
e.stopPropagation();
console.log('clicked');
});
});
});
对于 4.0.0 之前的 Select2 版本（因此是 3.5.x 及以下），您应该参考有关绑定到onSelect.
在较新版本的 Select2 中，事件不再在结果中被杀死，因此您可以mouseupmousedown像往常一样绑定到/事件。您应该避免绑定到该click事件，因为默认浏览器不会触发它。
$(".select2").select2({
templateResult: function (data) {
if (data.id == null) {
return data.text;
}
var $option = $("<spam></span>");
var $preview = $("<a target='_blank'> (preview)</a>");
$preview.prop("href", data.id);
$preview.on('mouseup', function (evt) {
// Select2 will remove the dropdown on `mouseup`, which will prevent any `click` events from being triggered
// So we need to block the propagation of the `mouseup` event
evt.stopPropagation();
});
$preview.on('click', function (evt) {
console.log('the link was clicked');
});
$option.text(data.text);
$option.append($preview);
return $option;
}
});<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select class="select2" style="width: 200px;">
<option value="https://google.com">Google</option>
<option value="https://mail.google.com">GMail</option>
</select>在这个例子中，我们停止mouseup事件的传播，以便浏览器触发click事件。如果您不使用实际链接，而只需要捕获一个click事件，您应该只钩入该mouseup事件。
使用默认的 select2select 事件触发器而不是使用其他 jquery 事件
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
有关更多详细信息，请参阅以下链接 https://select2.org/programmatic-control/events
对于 select2 4.0.0，上面的答案都不适合我，所以这就是我最终要做的：
$(document).on('mouseup', '.select2-container--open .select2-results__option', function (e) {
// Act on the element
}
具体来说，我只想对先前选择的项目采取行动：
$(document).on('mouseup', '.select2-container--open .select2-results__option[aria-selected=true]', function (e) {
// Do something on the previously-selected item
}