Question

我正在使用JQuery 1.8.3和Dropkick插件来自定义我网站中的选择。（https://github.com/JamieLottering/DropKick）。

dropkick插件会生成如下HTML：

<div class="dk_container dk_theme_default dk_open" id="dk_container_min-price" tabindex="" style="display: block;">
<a class="dk_toggle" style="width: 117px;"><span class="dk_label">Min pris (€/$)</span></a>
<div class="dk_options" style="top: 29px;">
    <ul class="dk_options_inner">
        <li class="dk_option_current"><a data-dk-dropdown-value="0">Min pris (€/$)</a></li>
        <li class=""><a data-dk-dropdown-value="50000">50.000</a></li>
        <li class=""><a data-dk-dropdown-value="75000">75.000</a></li>
    </ul>
</div>

问题是，当用户点击其中一个选项时，我需要做一些特定的事情，所以我将一个事件绑定到选项上的点击，如下所示：

$('.dk_options_inner li').on('click', function(){
alert('this');
});

它适用于Chrome和Firefox，但在IE中（我已经尝试过IE10，IE9和IE8）它无效。

这是一个显示问题的jsfiddle： http://jsfiddle.net/NPRPf/2/

我尝试过使用.bind（）和.on（），但是没有一个在IE中工作（并且都在其他浏览器上工作）。我也尝试将dk_options的css更改为“visibility：hidden”而不是“display：block”，但它也没有用。

有没有人知道可能会发生什么？

Answer 1

IE 10的问题是在文件jquery.dropkick.1-0.1.js第186行的DropKick插件上，有一个比较来测试浏览器是否为IE 6，对于IE 10和更新的这个比较是真的鉴于第17行，它检查了这个：

$.browser.version.substr(0, 1) < 7

显然，这会将IE 10报告为IE 1，因此它将被视为IE 6或更早版本。

Answer 2

UPDATE！滚动到底部

在玩了一些之后，我发现问题是该插件在IE中的功能与Chrome中的功能不同。在IE浏览器中，点击是在option标记上进行的，而不是在div的内部标记上。

例如，这适用于IE：

$('.list').dropkick();
$(document).on('click', '#min-price option', function(){
    alert('this tag name is [' + this.tagName + ']');
});

http://jsfiddle.net/h3Py6/

但不是Chrome。

也许你需要一个“if browser”类型的声明？

类似的东西：

$('.list').dropkick();

var isMSIE = /*@cc_on!@*/0;

if (isMSIE) {
    $(document).on('click', '#min-price option', function(){
        alert('this tag name is [' + this.tagName + ']');
    });    
}
else {
    $('.dk_options_inner li').on('click', function(){
        alert('this');
    });
}

http://jsfiddle.net/JYTCC/

关于Dropkick插件的重要说明

正如rafael的answer指出的那样。插件脚本中存在差异，导致它在以后（1.9+）版本的jQuery中崩溃。您可以使用类似我上面的代码来替换该行并修复jQuery的更高版本的插件。

要了解有关在JS中检测IE和版本的更多信息，THIS是迄今为止我见过的最好和最容易实现的解决方案之一。

正如我在另一条评论中所指出的，DropKick有一个change事件。这可能是利用代码的最佳位置。但是，这在IE10中似乎仍然失败，但它可以在9中运行！

$('.list').dropkick({
    change: function(value, label) {
        alert('label [' + label + '] = value [' + value + ']');
    }
});

http://jsfiddle.net/s8Pmv/

Jquery事件没有绑定到IE中的隐藏div

2 个答案:

UPDATE！滚动到底部

关于Dropkick插件的重要说明