Присоединить click-event к элементу в .select2-result

Question

Я ищу способ привязать событие click к элементу select2-result. Я пошел вперед и отформатирован как результат и выбор с помощью

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

добавить «информацию» -icon Я сейчас пытаюсь прикрепить простой щелчок-событие в .info-элемент, но могу» t получить это для работы:

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

Любая помощь? Кто-нибудь с аналогичной проблемой? Возможно ли это вообще?

Я подготовил jsFiddle на: http://jsfiddle.net/s2dqh/3/

Answer 1

Поскольку Select2 lib предотвращает любые события кликов в списке popover, вы не можете привязывать события к .info непосредственно. Но вы можете переопределить метод onSelect и поместить туда любой код.

Смотрите пример: http://jsfiddle.net/f8q2by55/

обновления для нескольких выбирает: http://jsfiddle.net/6jaodjzq/

Answer 2

вещь, кажется, что Tgas будет удален сразу после того, как окно закрывается. Поэтому событие click не может быть запущено.

Я изменил несколько вещей + событие, которое будет прослушиваться. Теперь это MouseDown ...

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

 
$("select").select2({ 
 
    formatResult: format, 
 
    formatSelection: format, 
 
    escapeMarkup: function(m) { return m; } 
 
}).on('select2-open',function(){ 
 
    console.log($('.info')) 
 
    $('.info').on('mousedown', function(event){ 
 
     console.log("click") 
 
     $('#log').text("clicked"); 
 
     event.preventDefault(); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script> 
 

 
<select> 
 
    <option>red</option> 
 
    <option>green</option> 
 
    <option>blue</option> 
 
</select> 
 

 
<div id="log"></div>

Answer 3

Просто добавьте 'открытый' слушателя и создать еще один 'MouseUp' перехватчик для тега '':

$("#select").on('open', function() { 
    $('.select2-results i').on('mouseup', function() { 
     alert('aaa'); 
    }); 
}); 

Вот ссылка на мое решение: http://jsfiddle.net/EW8t7/

Answer 4

Это похоже на концепции netme, но событие Выбор2 неправильно (возможно, версия разница), и вам нужно использовать stopPropagation, чтобы предотвратить пункт от выбраны:

http://jsfiddle.net/ZhfMg/

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

при использовании с х редактироваться. Это происходит, когда x-редактируемый переходит в режим редактирования (показанное событие), вот когда существует 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'); 
     }); 
    }); 
}); 

Answer 5

Я думаю, что обращение ВЫБ.2 о случае MouseUp предотвращает .info элемента от получения события щелчка. Наличие элемента .info для захвата события mouseup и предотвращения его распространения, похоже, исправить это.

function format(state, container) { 
    if (!state.id) return state.text; // optgroup 
    container.append(state.text); 
    $('<i class="info">link</i>') 
     .appendTo(container) 
     .mouseup(function(e) { 
      e.stopPropagation();    
     }) 
     .click(function(e) { 
      e.preventDefault(); 
      alert('CLICK'); 
     }); 
} 

Это также можно сделать, чтобы поддерживать связь в выбранном элементе, но это MouseDown событие, которое должно быть захвачена.

jsfiddle

Answer 6

Вам необходимо отвязать событие MouseUp из.select2-results__options. Я делаю это в моей функции templateResult:

function templateResult(location) { 

    var $location = $([html with links]); 

    $('.select2-results__options').unbind('mouseup'); 

    return $location; 
} 

Если вы хотите сохранить поведение по умолчанию ВЫБ.2 по выбору опции и закрытия выпадающего меню, вам необходимо вручную запустить эти события:

$('.select2-results__options').unbind('mouseup'); 

$('a', $location).on('click', function (e) { 
    $('#locations_dropdown').select2('val', location.id); 
    $('#locations_dropdown').select2('close'); 
}); 

return $location; 

Answer 7

Для версий Select2 перед 4.0.0 (так 3.5.x и ниже), вы должны обратиться к this answer about binding to onSelect.

В новых версиях выбор2 события больше не погибли в результатах так вы можете просто связываться с mouseup/mousedown событий как обычно. Вы должны избежать привязки к событию 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 8

Ни один из ответов выше работал для меня выбор2 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 
} 

Answer 9

Простой подход к нему в соответствии с документами.

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

Удивленный, чтобы не видеть ответа.