Question

我正在处理遗留代码，我偶然发现了这件艺术品：

//IE Hacks
if (navigator.appName == 'Microsoft Internet Explorer') {
    $("label").live('click', function() {
        $('#'+$(this).attr('for')).click().click().click();
    });
}
// End IE Hacks

我被告知这是写的，因为标签并不总是在IE中工作，这个技巧修复了它。它也不适用于两个.click()调用，但这三个调用都是必需的。

使用的jQuery版本是1.4.2。

我想重构这个以使用特征检测和更优雅的解决方案。

我在Google上查看了IE中的标签问题，并且仅发现隐藏输入的问题。

有谁知道这段代码可能解决的问题是什么？

有更优雅的解决方案吗？

更新：

您是否认为此代码可能已解决的问题没有问题我应该将其删除？

更新2 ：

我发现网站上的标签有问题。这是一段HTML：

<div class="remember-me">
    <input type="hidden" name="remember" value="0">
    <input type="checkbox" id="remember" name="remember" value="1" class="checkbox-input" rel="remember">
    <label class="label-remember" for="remember">Keep me logged in</label>
</div>

此HTML代码使用Ajax插入到页面中，因此可能与kevmc中描述的问题有关。

在Internet Explorer 7中，单击标签不会选中该复选框。相反，它会聚焦标签（带有细点边框）。

Answer 1

当页面加载旧版本的IE（我还没有测试过，因为IE8）之后，标签/输入对被添加到DOM时，似乎没有识别for和id属性之间的绑定。至于一个优雅的测试，我不知道一个

Answer 2

IE < 8 equates "name" attributes with "id"，因此点击标签可能会将焦点发送到隐藏的输入，因为它出现在DOM的前面，这可以解释为什么复选框没有响应IE7中的标签点击。

虽然我不确定触发click事件三次如何解决这个问题，但最优雅的解决方案是删除hidden输入。但是，hidden输入可能是总是在提交表单时发送值，而不像复选框，只有在成功（检查）后才会传递。

要解决标签焦点问题，我们应该更改标记以利用浏览器的默认行为，即将标签上的点击发送到相应的表单元素（通过“id”）。因此，我们会保留hidden输入以将相同的参数发送到后端，但更改复选框的id并更新for的{{1}}属性以匹配：

label

注意：我们从复选框输入中删除了<div class="remember-me"> <input type="hidden" id="remember" name="remember" value="0">  <input type="checkbox" id="rememberCB" class="checkbox-input">  <label class="label-remember" for="rememberCB">Keep me logged in</label>  </div>属性，因为我们不希望在表单提交中包含其值。相反，我们将更改name以在复选框更改时更新隐藏输入的值：

script

这样，后端应该在提交表单时收到相同的输入参数，并且标签会将焦点发送到正确的目标。

在此处查看此操作：http://jsbin.com/obujoc/6/edit

Answer 3

您为什么使用点击事件？只需要设置焦点！像这样：

    //IE Hacks
if (navigator.appName == 'Microsoft Internet Explorer') {
    $("label").live('click', function() {
        $('#'+$(this).attr('for')).focus();
    });
}
// End IE Hacks

Answer 4

你不认为黑客可以在标签中使用吗？

让我举个例子：

<!--[if IE]>
    $("label").live('click', function() {
    $('#'+$(this).attr('for')).focus();
});
<![endif]-->

不确定你的代码是做什么的，但是如果你使用它，因为我用更简单的代码向你展示它会起作用。

传统IE浏览器：标签没有聚焦输入

4 个答案: