クリックイベントをselect2-result-itemに添付する方法を探しています。私は先に進み、結果と選択の両方を経由してフォーマットしました
function format(state) {
if (!state.id) return state.text; // optgroup
return state.text + " <i class='info'>link</i>";
}
「情報」アイコンを追加するには単純なクリックイベントを.info要素に添付しようとしていますが、これを機能させることができません。
$('.info').on('click', function(event){
event.preventDefault();
alert("CLICK");
$('#log').text( "clicked" );
});
何か助けはありますか？同様の問題を抱えている人はいますか？これは可能ですか？
http://jsfiddle.net/s2dqh/3/でjsFiddleを準備しました
.infoSelect2 libはポップオーバーリストのクリックイベントを防ぐため、イベントを直接バインドすることはできません。ただし、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が存在し、その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');
});
});
});
4.0.0より前のバージョン（つまり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です。
他のjqueryイベントを使用する代わりに、デフォルトのselect2selectイベントトリガーを使用します
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
詳細については、以下のリンク https://select2.org/programmatic-control/eventsを参照してください。
上記の回答はいずれもselect24.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
}
ドキュメントによると、より単純なアプローチ。
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
これに対する答えが見当たらないことに驚いた。
'open'リスナーを追加し、''タグ用に別の'mouseup'リスナーを設定するだけです。
$("#select").on('open', function() {
$('.select2-results i').on('mouseup', function() {
alert('aaa');
});
});
これが私のソリューションへのリンクです：http：//jsfiddle.net/EW8t7/
Select2のmouseupイベントの処理により、.info要素がクリックイベントを取得できなくなると思います。要素にmouseup.infoイベントをキャプチャさせ、それが伝播しないようにすることで、それを修正できるようです。
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イベントです。
ボックスを閉じた直後にtgasが削除されるようです。したがって、クリックイベントを発生させることはできません。
いくつかの変更と、リッスンされるイベントを変更しました。今はマウスダウンです...
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>select2 v4.0.3でこの問題が発生し、「select2：selecting」イベントを使用することになりました。これが基本的に私がそれをした方法です：
var $select2 = $savedReportsList.select2({ [stuff] });
$select2.on('select2:selecting', function(e) {
var args = e.params.args;
if ($(args.originalEvent.target).hasClass('[something]')) {
if (confirm('Are you sure?')) {
window.location = '[somewhere]' + '/' + args.data.id;
}
return false; // stops propogation (so select2:select never fires)
});
});.select2-results__options要素からmouseupイベントのバインドを解除する必要があります。私はtemplateResult関数でそれを行っています：
function templateResult(location) {
var $location = $([html with links]);
$('.select2-results__options').unbind('mouseup');
return $location;
}
オプションを選択してドロップダウンを閉じるというselect2のデフォルトの動作を維持したい場合は、これらのイベントを手動でトリガーする必要があります。
$('.select2-results__options').unbind('mouseup');
$('a', $location).on('click', function (e) {
$('#locations_dropdown').select2('val', location.id);
$('#locations_dropdown').select2('close');
});
return $location;
このような単純なonchangeイベントも、問題の解決に役立ちます
<select id="GetClientAccounts" class="default-select2 form-control col-md-4" onchange="GetClientAccounts();">
<option disabled selected value="-1">Select a customer from here</option>
@{
if (ViewBag.customers != null)
{
foreach (CustomerTBL customer in ((List<CustomerTBL>)ViewBag.customers).OrderBy(c => c.cusCustomerName))
{
<option value="@customer.cusCustomerID">@customer.cusCustomerName</option>
}
}
}
</select>