0

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

//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 中单击标签不会选中复选框。相反，它聚焦标签（带有细虚线边框）。

4

4 回答 4

2

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

于 2013-04-03T13:57:48.027 回答
2

IE < 8 将 "name" 属性等同于 "id"，因此单击标签可能会将焦点发送到隐藏输入，因为它出现在 DOM 中较早，这可以解释为什么复选框不响应 IE7 中的标签单击。

虽然我不确定如何触发三次点击事件来解决这个问题，但最优雅的解决方案是删除hidden输入。但是，hidden输入可能总是在提交表单时发送一个值，这与复选框不同，复选框仅在成功（选中）时才传递。

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

<div class="remember-me">
  <input type="hidden" id="remember" name="remember" value="0">  <!-- added @id -->
  <input type="checkbox" id="rememberCB" class="checkbox-input"> <!-- changed @id, removed @name -->
  <label class="label-remember" for="rememberCB">Keep me logged in</label> <!-- changed @for -->
</div>

注意：我们name从复选框输入中删除了该属性，因为我们不想在表单提交中包含它的值。相反，我们将更改script以在复选框更改时更新隐藏输入的值：

$('#rememberCB').live('change', function() {
  $('#remember').val( $(this).is(':checked') ? '1' : '0' );
});

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

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

于 2013-04-03T15:28:50.703 回答
0

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

    //IE Hacks
if (navigator.appName == 'Microsoft Internet Explorer') {
    $("label").live('click', function() {
        $('#'+$(this).attr('for')).focus();
    });
}
// End IE Hacks
于 2013-04-03T14:02:25.817 回答
0

你不认为黑客可以在<!--[if IE]> <![endif]-->标签中使用吗？

让我给你看一个例子：

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

不确定您的代码是做什么的，但是如果您按照我向您展示的更简单的代码使用它，它将起作用。

于 2013-04-03T15:01:09.640 回答