标签中的可点击img在IE8中不起作用
Clickable img wrapped in label not working in IE8
我有以下标记和Javascript:
JSFiddle
HTML:
<form method="get" action="some-url-here">
<div class="UserFilter">
<ul class="UserFilter">
<li>
<label class="Selected" for="1">
<input id="1" type="radio" value="1" name="Profile" />
<img title="User 1" alt="User 1" src="img-url-here" style="width: 50px;height: 50px" />
User 1
</label>
</li>
<li>
<label class="Selected" for="2">
<input id="2" type="radio" value="2" name="Profile" />
<img title="User 2" alt="User 2" src="img-url-here" style="width: 50px;height: 50px" />
User 2
</label>
</li>
</ul>
</div>
</form>
JavaScript:
var labelID;
$("label img").live("click", function() {
labelID = $(this).parent().attr('for');
$('#'+labelID).trigger('click');
});
$('ul.UserFilter input').click(function () {
$('ul.UserFilter input:not(:checked)').parent().removeClass("Selected");
$('ul.UserFilter input:checked').parent().addClass("Selected");
//$(this).closest("form").submit();
});
$('input:checked').parent().addClass("Selected");
CSS:
div.UserFilter {
background: none repeat scroll 0 0 #EAE5DA;
border-bottom: 1px solid #F1EEE6;
border-top: 3px solid #0888A5;
box-shadow: 0 5px 10px #F1F1F1;
}
div.UserFilter ul {
display: inline-block;
}
ol, ul {
list-style: none outside none;
}
div.UserFilter ul li label.Selected {
background: none repeat scroll 0 0 #0888A5;
border: 1px solid #16758B;
color: #FFFFFF;
text-shadow: 0 1px 0 #16758B;
}
div.UserFilter ul li label.Selected {
background: none repeat scroll 0 0 #688ABD;
border: 1px solid #688ABD;
color: #FFFFFF;
cursor: pointer;
text-shadow: 0 1px 0 #52688A;
transition: border-color 0.218s ease 0s;
}
div.UserFilter ul li label {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px 2px 2px 2px;
display: inline-block;
letter-spacing: normal;
padding: 0 5.666px 0 0;
transition: background 0.218s ease 0s;
word-spacing: normal;
}
点击文本可以很好地选择与其相关的单选按钮(在Firefox、Chrome和IE9+中测试)。但是,在IE8-中,单击图像不会选择或激发单选按钮的单击事件。任何想法、变通解决方案或建议都非常受欢迎。
我喜欢Brad使用带有背景图像的<span>
的解决方案。通过这种方式,您可以在不必使用JavaScript的情况下解决问题。
您的HTML代码变为:
<form method="get" action="some-url-here">
<div class="UserFilter">
<ul class="UserFilter">
<li>
<label class="Selected" for="1">
<input id="1" type="radio" value="1" name="Profile" />
<span title="User 1" style="background-image: url('img-url-here')width: 50px;height: 50px;display: inline-block;"></span>
User 1
</label>
</li>
<li>
<label class="Selected" for="2">
<input id="2" type="radio" value="2" name="Profile" />
<span title="User 2" style="background-image: url('img-url-here')width: 50px;height: 50px;display: inline-block;"></span>
User 2
</label>
</li>
</ul>
</div>
</form>
JavaScript变得更小了。您也可以删除$('input:checked').parent().addClass("Selected");
行,因为您将Selected
类设置为HTML代码中的标签:
$('ul.UserFilter input').click(function () {
$('ul.UserFilter input:not(:checked)').parent().removeClass("Selected");
$('ul.UserFilter input:checked').parent().addClass("Selected");
//$(this).closest("form").submit();
});
CSS保持不变,只是您可以删除其中一个div.UserFilter ul li label.Selected
选择器。
更新的jsFiddle:http://jsfiddle.net/ft4Hb/1/
相关文章:
- Recaptcha在IE7和IE8中不起作用
- 在IE8中不起作用的元素上触发单击事件
- 数据-在IE8中不起作用
- getComputedStyle替换:currentStyle(IE8/7)不起作用
- IE8 jquery ajax头请求不起作用
- 显示隐藏的html表在javascript(IE8)中不起作用
- ScriptX 打印功能在 IE8 中不起作用
- Angularjs 跨源资源共享 (CORS) 发布或放置方法在 IE8 和 IE9 中不起作用
- ExtJs 5.0:forEach on Array of Objects在IE8中不起作用
- 将JSON对象转换为敲除observable在IE8中不起作用,但在所有其他浏览器中都起作用
- 聚焦函数在ie8中不起作用
- 启动网格在IE8中不起作用
- Svg标签在IE8中不起作用
- Twitter引导程序示例在IE8中不起作用
- 引导程序3在IE8中不起作用(已检查其他答案)
- IE8的Javascript占位符不起作用
- Javascript中的开关案例在IE8中不起作用
- 如果我添加 pageX 页面 Y 在 IE8 中不起作用<!文档类型 html>.
- getElementsByTagName和getElementsByClassName在IE8中不起作用
- 导航在IE8上不起作用