事件触发器 不适用于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()：

$( 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>

Answer 2

您可以在select元素上使用change事件，然后检查所选选项在哪里具有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>