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

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

更新！滚动到底部

玩了一段时间后，我发现问题在于该插件在 IE 中的工作方式与在 Chrome 中的工作方式不同。在 IE 中，点击发生在option 标签上，而不是在 div 的内部 li 上。

例如，这适用于 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 所指出的那样。插件脚本中存在差异，这将导致它在 jQuery 的更高版本（1.9+）中一起崩溃。您可以使用我上面的代码来替换该行并为更高版本的 jQuery 修复插件。

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

---

正如我在另一条评论中看到的，DropKick 有一个自己的 change 事件。那可能是使用您的代码的最佳场所。但是，这在 IE10 中似乎仍然失败，但在 9 中有效！

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

http://jsfiddle.net/s8Pmv/