代码之家 › 专栏 › 技术社区 › Tom

在Safari中未触发JQuery单击事件?

javascript-events safari select jquery javascript

3

Tom · 技术社区 · 17 年前

Firefox 3.05-是
即7.0.5730.13-是
IE6Eolas-是
萨拉菲3.2.1-否
铬1.0.154.43-第

<html>
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
        $('#myoption').click(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
    });     
    </script>
</head>
<body>
    <select id="myoption">
    <option value="A">A</option>
    <option value="B">B</option>
    </select>
</body>
</html>

有人知道我该怎么做才能让它工作吗?警报最终会触发,但只有在双击“选择”框后才会触发?

2 回复 | 直到 6 年前

1

5

Tom 17 年前

我发现了我的问题。对于选择框,您需要为“更改”事件而不是“单击”事件注册处理程序。奇怪的是,Firefox和IE使用点击事件。

总之,以下代码适用于所有浏览器:

<html>
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
        $('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
    });         
    </script>
</head>
<body>
    <select id="myoption">
    <option value="A">A</option>
    <option value="B">B</option>
    </select>
</body>
</html>

2

1

Wichert Akkerman 16 年前

Safari和Chrome都是基于webkit的浏览器。Webkit使用操作系统中的本机下拉列表元素,而不是实现下拉列表本身,不幸的是,本机下拉列表不支持单击事件。出于同样的原因,它们也不支持选项元素或其他整洁技巧的CSS。

让这些功能正常工作的唯一跨浏览器方法是使用<ul>还有很多javascript。