将click-event附加到.select2-result中的元素

Question

我正在寻找一种方法将click-event附加到select2-result-item.我已经完成了格式化结果和选择

function format(state) {
    if (!state.id) return state.text; // optgroup
    return state.text + " <i class='info'>link</i>";
}

添加一个"信息"-icon我现在正试图将一个简单的点击事件附加到.info-element但是无法使其工作:

$('.info').on('click', function(event){
    event.preventDefault();
    alert("CLICK");
    $('#log').text( "clicked" );
});

有帮助吗？有类似问题的人吗？这有可能吗？

我准备了一个jsFiddle:http://jsfiddle.net/s2dqh/3/

Answer 1

因为Select2 lib会阻止弹出窗口列表上的任何单击事件,所以无法.info直接绑定事件.但是你可以重新定义onSelect方法并在那里放置你想要的任何代码.

参见示例:http://jsfiddle.net/f8q2by55/

多个选择的更新:http://jsfiddle.net/6jaodjzq/

Answer 2

这在概念上类似于netme,但是select2事件是错误的(可能是版本差异),你需要使用stopPropagation来防止选择项目:

http://jsfiddle.net/ZhfMg/

$('#mySelect2').on('select2-open', function() { 
    $('.select2-results .info').on('mouseup', function(e) { 
        e.stopPropagation();
        console.log('clicked');
    }); 
});

如果与x-editable一起使用.这样做的是当x-editable进入编辑模式(显示事件)时,就是当select2存在并且你可以连接到它的open函数时.

$('#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');
        }); 
    });
});

Answer 3

对于4.0.0之前的Select2版本(因此3.5.x及更低版本),您应该参考有关绑定的答案onSelect.

在较新版本的Select2中,事件不再在结果中被杀死,因此您可以mouseupmousedown像往常一样绑定到/ events.您应该避免绑定到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事件.

Answer 4

使用默认的 select2select 事件触发器而不是使用其他 jquery 事件

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

有关更多详细信息，请参阅以下链接 https://select2.org/programmatic-control/events

Answer 5

None of the answers above worked for me for select2 4.0.0, so here's what I ended up doing:

$(document).on('mouseup', '.select2-container--open .select2-results__option', function (e) {
    // Act on the element
}

Specifically, I wanted to only act on the previously-selected item:

$(document).on('mouseup', '.select2-container--open .select2-results__option[aria-selected=true]', function (e) {
    // Do something on the previously-selected item
}

Answer 6

根据文档的更简单的方法。

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

很惊讶没有看到任何答案。