IE jquery点击仅适用于li中的文本，而不适用于整个框

我有一系列按钮创建为li，我希望用户能够点击：

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
  

这是相关的CSS：

 .item_button{ -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); background-color:#ededed; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; float:left; font-size:10pt; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; width:120px; margin-top:12px; } .item_button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); background-color:#dfdfdf; } .item_button:active { position:relative; top:1px; } 

…这是我的jQuery处理程序：

 $('.item_list li').click(function(){ $('.item_list li').attr('class', 'item_button'); $(this).attr('class','item_button_selected') }); 

这一切都适用于Chrome和Safari。 用户可以点击li中的任意位置并“点击”。 在IE中，仅当用户直接点击li内的文本本身时，才会捕获hover行为和点击，即“1”，“2”等。我缺少什么？

Answer 1

首先，你不应该重复自己，所以尝试更新你的jQuery，在单个变量中使用$（this）：

 $('.item_list li').click(function() { var $this = $(this); $this.attr('class', 'item_button'); $this.attr('class', 'item_button_selected'); }); 

其次，我同意elclanrs，你应该尝试使用toggleClass（）。

关于你的IE问题，它适用于IE9和IE10。 哪个版本对你不起作用？ 你在使用IE的兼容模式吗？