Question

我将通过一个非常简单的代码（见下文）重新创建我的问题：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <select class="a">
        <option class="b" value="opt1">opt1</option>
        <option class="b" value="opt2">opt2</option>
        <option class="b" value="opt3">opt3</option>
        <option class="b" value="opt4">opt4</option>
    </select>

    <script>
    $('.b').click(function(){
        alert("hi");
    });

    </script>
</body>

我希望如果我单击一个选项（在下拉列表中），则将显示警报消息。在Firefox中，这确实发生得很好，但是在Safari中却无法正常工作。有人可以帮我在Safari中正常工作吗？

Answer 1

有一些已知的解决方法：

将cursor:pointer添加到您的<option> s
将.click(function(){})替换为.on('click touchstart', function(){})

另一种选择（恕我直言，正确的选择）是在父项oninput上使用<select>事件：

 $('select').on('input', function(){/* whatever */})

$('select').on('input', function(){
  console.log($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value=""> Select something </option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

选项中的click事件在Safari中不起作用

1 个答案: