IE 8及以下版本不触发点击有display:none的元素; 任何解决方法？

Question

问题出在Internet Explorer 8及更低版本中.找到了一个体面的工作解决方案

问题

Internet Explorer 8及更低版本不会触发click()由jQuery设置的事件(甚至可能是内联的,不确定)<input />,它们具有display设置为CSS属性的元素none.它适用于Internet Explorer 9,Mozilla Firefox和Google Chrome.奇怪的.这是代码的方式,是否有适用于Internet Explorer 8及更低版本的解决方法？

上下文

该input被点击给出的样式display: none;.并且该功能在以下情况click下给出input.由于整个东西都在里面label,它会在点击时触发click事件.你可以把它当作某种漂亮的选择器,隐藏了.inputlabelinput

该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的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及以下的Hack:

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 Hack:

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;
}