IE 8和下面上具有显示元件不触发点击：无; 任何解决方法吗？(IE 8 and below n

问题是与Internet Explorer 8和下面。有没有找到一份像样的工作方案。

问题

Internet Explorer 8和下面没有触发click()事件的jQuery设置（或者甚至可以是内联的，不知道）上<input />元素，其具有的CSS属性， display设置为none 。它的工作原理在Internet Explorer 9，Mozilla Firefox浏览器和谷歌浏览。奇怪的。这是怎样的代码是，是否有任何变通的Internet Explorer 8和下面？

上下文

的input被点击被赋予一个风格display: none; 。而且功能在给定click的事件input 。由于整个东西是里面label时，会触发click事件的input时， label点击。你可以以此为某种漂亮选择器，隐藏input 。

该label隐含转移的click事件到第一input默认情况下，这也正是我想在这里使用它。我不想让用户看到丑陋的input在这里。预计浏览器的行为，但不工作。

HTML

<ul>
    <li>
        <label>
            <input type="button" value="Button 1" />
            Hello! This is a list item #1.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 2" />
            Hello! This is a list item #2.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 3" />
            Hello! This is a list item #3.
        </label>
    </li>
</ul>

造成这一问题的确切CSS

ul li,
ul li label {display: block; padding: 5px; cursor: pointer;}
ul li label input {display: none;}
ul li {border-bottom: 1px solid #ccc;}
ul li:hover {background-color: #eee;}

JavaScript的

$(document).ready(function(){
    $("input").click(function(){
        alert("Hey you! " + $(this).attr("value"));
    });
});

小提琴： http://jsfiddle.net/qSYuP/

更新＃1：尝试给予`for`属性：

<label for="btn1">
    <input type="button" value="Button 1" id="btn1" />

还是不行！

更新＃2：尝试CSS `visibility: hidden;` ：

ul li label input {visibility: hidden;}

休息布局。但是，仍然无法正常工作！

更新＃3：尝试CSS `position: absolute;` ：

ul li label {overflow: hidden;}
ul li label input {position: absolute; left: -99em;}

作品！ 我不是在使用位置overflow: hidden; ，认真抓好！

更新＃4：手动触发`click()`函数：

$(document).ready(function(){
    $("input").click(function(){
        console.log("Hey you! " + $(this).attr("value"));
    });
    $("label").click(function(){
        $(this).find("input").click();
    });
});

那么，IE 8熄灭堆栈的打印后LOG: Hey you! Button 3 LOG: Hey you! Button 3的1209倍！

LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
SCRIPT28: Out of stack space

作品无限！ 应该与我的脚本的问题！

解决方案：蹩脚的修复程序的种类，但没有的伎俩！

既然是因为IE 8，它支持opacity ，我不得不使用display: inline-block; 与opacity: 0; 。

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

现在input的盒子是隐藏的，从字面上。此修复程序仅适用于IE 8！

不得不使用IE 8和下面哈克修复：

ul li label input {
    opacity: 0\9;
    width: 0px\9;
    height: 0px\9;
    display: inline-block\9;
    padding: 0\9;
    margin: 0\9;
    border: 0\9;
}

小提琴： http://jsfiddle.net/VSQbD/

Answer 1:

我觉得这是非常简单的。你只需要在可见的项目使用的点击处理程序。如果你想在点击<label>或<li>工作时<input>对象是隐藏的，你想让它在所有的浏览器，那么你只需要放一个单击处理无论是在<label>或<li>因为这是一个可见对象，将接收的点击时<input>是隐藏的。

Answer 2:

蹩脚修复的种类，但没有的伎俩！

既然是因为IE 8，它支持opacity ，我不得不使用display: inline-block; 与opacity: 0; 。

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

现在input的盒子是隐藏的，从字面上。此修复程序仅适用于IE 8！

使用IE 8哈克尝试：

ul li label input {
    opacity: 0\9;
    width: 0px\9;
    height: 0px\9;
    display: inline-block\9;
    padding: 0\9;
    margin: 0\9;
    border: 0\9;
}

Answer 3:

你能不能位置的元素绝对的，而是把它剩下的财产像-99999px？

Answer 4:

不同的浏览器解释display:none不同。 display:none实际意义的元素应该消失，使得难以jQuery的DOM中找到。

更好的办法是使用visibility:hidden ，然后用click方法

Answer 5:

你的代码是非常不正确..

input里面label ？
事件是假设泡沫向上和向下不
和它的这么简单。如果你想知道被点击时，李的附加处理到，而不是输入

在更新后的4，你可以做一个event.stopPropagation为“input`点击这将解决问题的无穷

Answer 6:

从来没有被击中这是我做的事情略有不同反正-在标签上点击并input.checked = !input.checked; return false; input.checked = !input.checked; return false; ，然后对输入（而不是点击事件），一个“变”事件。

文章来源: IE 8 and below not triggering click on elements which have display: none; Any workaround?