IE jquery点击仅适用于li中的文本，而不适用于整个框 [英] IE jquery click only works on text in li, not entire box

问题描述

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

I have a series of buttons created as li that I want the user to be able to click:

<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处理程序：

...and here is my jQuery handler:

$('.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等。我缺少什么？

This all works fine in Chrome and Safari. The user can click anywhere in the li and it "clicks." In IE, the hover behavior and the click are only caught if the user clicks directly on the text itself inside of the li, i.e. "1", "2", etc. What am I missing?

推荐答案

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

Firstly, you shouldn't repeat yourself so try and update your jQuery to use $(this) in a single variable:

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

    var $this = $(this);

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

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

Secondly, I agree with elclanrs, you should try and use toggleClass().

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

Regarding your IE problem, it works for me in IE9 and IE10. Which version does it not work for you? Are you using IE's compatibility mode?

这篇关于IE jquery点击仅适用于li中的文本，而不适用于整个框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！