select2文本框上的按键事件不起作用

Question

I have a select2 dropdown.

<select class="eselect2" type="text" id="qename" style="width: 390px;"> 

                    <option value="1">NY</option>
          <option value="2">MA</option>
          <option value="3">PA</option>
          <option value="4">CA</option>
                </select>

with simple javascript

$( document ).ready(function() {
    console.log( "ready!" );
    $(".eselect2").select2();
    $('.select2-search__field').on("keydown", function(e) {
                    console.log(e.keyCode); // nothing happens
            if (e.keyCode == 13) {
                }
       });
});

I have an event associated with keypress on the input field. It does not get fired since, the textbox is destroyed and recreated each time the dropdown arrow in the select2 is clicked. I have attached a fiddle for clarity. http://jsfiddle.net/sizekumar/ckfjzkhj/

Answer 1

Really jQuery keypress event doesn't fire on input.select2-search__field element. But pure js event does. This piece of code works for me

document.getElementsByClassName('select2-search__field')[0].onkeypress = function(evt) { console.log(evt); }

Answer 2

EDIT: This doesn't solve the problem.

I wouldn't call this a duplicate, but I think this answer directly applies: https://stackoverflow.com/a/30697173/5948237

$('.select2-input').on("keydown", function(e) {
        if (e.keyCode == 13) {
            }
});