The issue is with Internet Explorer 8 and below. Have found a decent working solution.

问题

Internet Explorer 8及更低版本不会触发由< input />上的jQuery设置的click()事件(甚至可能是内联的,不确定的)具有CSS属性的元素,显示设置为none.它适用于Internet Explorer 9,Mozilla Firefox和Google Chrome.奇怪的.这是代码是如何和有没有任何工作的Internet Explorer 8及以下？

上下文

要点击的输入给出一个样式显示：none ;.并且该功能在输入的点击事件中给出.由于整个内容都在标签内,所以当标签点击时,会触发输入上的点击事件.你可以把它当成某种漂亮的选择器,隐藏输入.

标签默认地将click事件传输到第一个输入,这就是我想在这里使用它.我不希望用户在这里看到丑陋的输入.预期的浏览器行为,但不工作.

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：试图给出属性：

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

还是不行！

更新#2：尝试CSS可见性：hidden ;:

ul li label input {visibility: hidden;}

打破布局.但是,还是不行！

更新#3：尝试CSS位置：绝对;

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：嘿你！按钮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,我不得不使用display：inline-block;不透明度：0.

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

现在,输入框是隐藏的.这个修复仅适用于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/