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

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

<ul class="item_list">
<li class="item_button" id="128" style="color: #4bb2c5" data-seq= "0">1</li>
<li class="item_button" id="129" style="color: #EAA228" data-seq= "1">2</li>
<li class="item_button" id="130" style="color: #c5b47f" data-seq= "2">3</li>
<li class="item_button" id="131" style="color: #579575" data-seq= "3">4</li>
<li class="item_button" id="132" style="color: #839557" data-seq= "4">5</li>
<li class="item_button" id="133" style="color: #958c12" data-seq= "5">6</li>
<li class="item_button" id="134" style="color: #953579" data-seq= "6">7</li>
<li class="item_button" id="135" style="color: #4b5de4" data-seq= "7">8</li>
</ul>

…下面是我的jQuery处理程序：

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

---

这一切都在Chrome和Safari中运行良好。用户可以单击li中的任何位置，它会“单击”。在IE中，只有用户直接单击li中的文本本身，即“1”、“2”等，才会捕捉到悬停行为和单击。我缺少什么？

首先，您不应该重复自己的操作，所以请尝试更新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的兼容模式吗？

请尝试：

$（此）。在click事件中切换class（'item\u button\u selected item\u button'）

并删除所有其他内容，您不应该使用

attr（'class'）

，因为它会覆盖以前设置的类。然后初始化第一项。在IE（9）中对我有效。我也有同样的问题，这方面有什么消息吗？肯定有一些css，因为如果我从div中删除所有类，它会再次有效

$('.item_list li').click(function() {

    var $this = $(this);

    $this.attr('class', 'item_button');
    $this.attr('class', 'item_button_selected');
});