Блог

Главная - Вопросы по программированию - Триггер события в не работает в webkit

Триггер события в не работает в webkit

#javascript #jquery #webkit #eventtrigger

#javascript #jquery #webkit #eventtrigger

Вопрос:

Я хочу добавить триггер события в выпадающий <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 и т.д.) Это не работает. Почему?

Комментарии:

1. Вам специально нужно добавить прослушиватель событий для <option> элементов или вы просто хотите прослушать входные данные для <select> элемента?

2. Вы конкретно хотите знать, почему? Вероятно, это особенность того, как события щелчка всплывают в каждом браузере. Решение состоит в том, чтобы использовать изменение выбора, а не щелчок по параметрам.

3. Ну, решение описано в дубликате, который я отметил

4. Помимо того, что click не работает с option элементами во всех браузерах (причина просто в их интерпретации спецификации. Это нигде не задокументировано) это также плохая практика по соображениям доступности. Всегда используйте change , тогда проблема спорна.

5. Проголосуйте за повторное открытие. Этот вопрос не является дубликатом. OP конкретно спрашивает, почему код работает с Firefox, но не с WebKit, и связанный дубликат не решает эту проблему.

Ответ №1:

Если вы используете это для обнаружения изменений ввода, вы можете использовать .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>

Ответ №2:

Вы могли бы вместо этого использовать 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>