此问题与Internet Explorer8及更低版本有关。找到了一个像样的工作解决方案。
问题
Internet Explorer8和更低版本不会触发由jQuery (或者甚至可能是内联的,不确定的)在<input />
元素上设置的click()
事件,这些元素具有CSS属性,display
设置为none
。它适用于Internet Explorer9、Mozilla Firefox和Google Chrome。真奇怪。代码就是这样的,有没有针对Internet Explorer8及更低版本的变通方法?
上下文
将为要单击的input
指定一个样式display: none;
。该函数在input
的click
事件中给出。由于所有内容都在label
中,因此当单击input
时,它会触发label
上的click
事件。您可以将其视为某种漂亮的选择器,隐藏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();
});
});
好吧,IE8在打印的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
可以无限工作!应该是我的脚本的一个问题!
解决方案:有点糟糕的修复,但成功了!
因为IE8支持opacity
,所以我不得不在opacity: 0;
中使用display: inline-block;
。
ul li label input {
opacity: 0;
width: 0px;
height: 0px;
display: inline-block;
padding: 0;
margin: 0;
border: 0;
}
现在input
的盒子被隐藏了,这个修复只适用于IE8!
必须使用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;
}
https://stackoverflow.com/questions/13796729
复制相似问题