Question

在IE8中，当运行下面的代码时，出现的警报毫无意义。有时它返回第一个按钮，有时返回另一个按钮

I asked a similar question to this on SO.也许这些都是同一个问题。目前尚不清楚，所以我决定提出第二个问题。

This one is also related. And this one 但他们都错过了这个标记，我现在不知道该怎么做。

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/south-street/jquery-ui.css" rel='stylesheet' type='text/css'>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.js"></script>

<script language="javascript">

    $(document).ready(function () {
        $("#toolGroup").buttonset();
        $("#toolGroup").click(
        function () {
            alert($('input:radio[name=marker]:checked').val());
        }
        );
    });

</script>
</head>
<body>

    <div id="toolGroup">
        <input name="marker" type="radio" id="check1" value="tool1" checked /><label for="check1"><img src="/images/tool1.png" width="40" /></label>
        <input name="marker" type="radio" id="check2" value="tool2" /><label for="check2"><img src="/images/tool2.png" width="40" /></label>
        <input name="marker" type="radio" id="check3" value="tool3" /><label for="check3"><img src="/images/tool3.png" width="40" /></label>
    </div>

</body>
</html>

Answer 1

因为您将click事件绑定到容器，因为您的单选按钮的<label for='blah'>标签，它会被触发两次。你可以通过用以下函数替换你的函数来看到这种情况：

$(document).ready(function () {
    $("#toolGroup").click(function (e) {
        alert(e.target);
    });
});

尝试将点击事件绑定到输入。单击标签时，它会触发输入上的单击事件。所以这样的事情可以让你得到你想要的东西：

$(document).ready(function () {
    $("#toolGroup").buttonset();
    $("#toolGroup input").click(function () {
        alert($('input:radio[name=marker]:checked').val());
    });
});

我在IE8上测试了它，它对我的输入有效。

编辑：您也可以将click（）替换为change（）

IE8选择器或jQuery ButtonSet不能始终返回正确的结果（单选按钮）

1 个答案: