Триггер события на <option>не работает на webkit

Question

Я хочу добавить триггер события в раскрывающемся списке <select>. Пример ( jsFiddle ):

$( document ).ready(function() {
    $('.lorem').click(function() {
        alert('ipsum');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option class="lorem">1</option>
  <option class="lorem">2</option>
</select>

В Firefox, когда я нажимаю на него, он срабатывает нормально. Но на webkit (Chrome / Safari и т. Д.) Он не работает. Зачем?

Answer 1

Вместо этого вы можете использовать событие change для элемента select, а затем проверить, где выбранная опция имеет класс lorem, например:

$(document).ready(function() {
  $('select').on('change', function() {
    if ($("option:selected", this).hasClass('lorem')) {
      alert('ipsum');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option class="lorem">1</option>
  <option class="lorem">2</option>
  <option class="foo">3</option>
</select>

Answer 2

Если вы используете это для обнаружения изменений ввода, вы можете использовать .change():

$( document ).ready(function() {

  $("select").change(function(e) {
    console.log($("select").val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option class="lorem">1</option>
  <option class="lorem">2</option>
</select>