web-dev-qa-db-ja.com

click-eventを.select2-resultの要素に添付します

クリックイベントを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" );
});

助けがありますか？同様の問題を抱えている人はいますか？これはまったく可能ですか？

次の場所でjsFiddleを準備しました： http://jsfiddle.net/s2dqh/3/

javascriptjquery-select2
25
brckmann

Select2 libはポップオーバーリストのクリックイベントを防ぐため、イベントを.infoに直接バインドすることはできません。ただし、onSelectメソッドを再定義して、必要なコードをそこに配置できます。

例を参照してください： http://jsfiddle.net/f8q2by55/

複数選択の更新： http://jsfiddle.net/6jaodjzq/

34
ant_Ti

これは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');
        }); 
    });
});
9
AaronLS

Select2の4.0.0より前のバージョン（つまり3.5.x以下）については、 onSelectへのバインドに関するこの回答 を参照する必要があります。

Select2の新しいバージョンでは、結果内でイベントは強制終了されないため、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イベントにフックするだけです。

7
Kevin Brown

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
}
4
Aegix

'open'リスナーを追加し、 ''タグ用に別の 'mouseup'リスナーを設定するだけです：

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

ここに私のソリューションへのリンクがあります： http://jsfiddle.net/EW8t7/

2
Mikhail Chernykh

ドキュメントによると、よりシンプルなアプローチ。

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

これに対する答えが表示されないことに驚いた。

2
kushalvm

Select2の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

1
John S

他のjqueryイベントを使用する代わりに、デフォルトのselect2selectイベントトリガーを使用する

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

詳細については、以下のリンクを参照してください https://select2.org/programmatic-control/events

1
Balakrishnan Bsk

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)
  });
});
0
etipton

問題は、ボックスが閉じられた直後に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>
0
Christian

.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;
0
Jeffrey Barrett