問題はInternetExplorer8以下にあります。まともな実用的な解決策を見つけました。
問題
Internet Explorer 8以下は、CSSプロパティがに設定されている要素でclick()jQueryによって設定された（またはインラインであるかどうかわからない）イベントをトリガーしていません。Internet Explorer 9、Mozilla Firefox、およびGoogleChromeで動作します。変。これがコードの内容であり、Internet Explorer 8以下の回避策はありますか？<input />displaynone
コンテクスト
inputクリックするスタイルにはスタイルが与えられますdisplay: none;。そして、関数はのclickイベントで与えられinputます。すべてのものがの中にあるので、クリックされたときにイベントをlabelトリガーします。これをある種のかわいいセレクターと見なして、を非表示にすることができます。clickinputlabelinput
デフォルトでは、暗黙的にイベントを最初のイベントに転送します。これをここで使用し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/
for更新＃1：属性を与えようとしました：
<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は1209LOG: Hey you! Button 3回印刷した後、スタックから外れます！
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に使用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'ボックスは文字通り非表示になります。この修正はIE8専用です！
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;
}