jquery - IE jquery click 仅适用于 li 中的文本，不适用于整个框

Question

我创建了一系列作为 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>

这是相关的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 内的文本本身(即“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 的兼容模式吗？