Question

问题：
为什么选择下拉列表的jquery .click事件处理程序在IE和Firefox中运行良好，而不是Chrome？

详细信息：
我无法通过Chrome激活.click事件处理程序，但它适用于IE和Firefox。在IE和Firefox中，当在下拉列表中选择“opt1”时，会显示一个警告框。在Chrome中，alert("Hello");语句甚至从未被解析过。我正在运行Win7。我查看了JQuery API documentation，但没有运气。这是代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="ChromeTest.js"></script>    
</head>
<body>
    <select>
        <optgroup label="Some">
            <option id="opt1">1</option>
            <option id="opt2">2</option>
        </optgroup>
    </select>
    <input type="text" id="inputTest1" />
</body>
</html>

...支持以下js：

// JavaScript source code
$(document).ready(function () {
    var showArea = $("#inputTest1");
    $('#opt1').click(function () {
        alert("Hello");
    });
});

Answer 1

2009年在StackOverflow here上回复了这个问题。

考虑click事件不考虑使用键盘进行的选择，并考虑使用change标记上的<select>事件，因为您可以检索相同的信息。

JSFiddle

$(document).ready(function () {
    $('select').on('change', function () {
        // If you need access to the element that was selected, use find
        console.log($(this).find('option:selected:first').text());

        // If you just need the value
        console.log($(this).val());
    });
});

Answer 2

使用此脚本

<script>
$(document).ready(function () {
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    alert( str );
  })
  .change();

});
    </script>

您的HTML

  <select>
        <optgroup label="Some">
            <option id="opt1">1</option>
            <option id="opt2">2</option>
        </optgroup>
    </select>

    <input type="text" id="inputTest1" />

Answer 3

您可能已禁用针对您正在处理的特定页面的警报。请改用console.log，看看它是否记录了任何内容

Chrome与Firefox中的.click处理程序

3 个答案: