1

我正在使用 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”，但它也没有用。

有谁知道可能会发生什么？

4

2 回答 2

4

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 或更早版本。

于 2013-06-28T19:32:11.083 回答
3

更新！滚动到底部

经过一番尝试，我发现问题在于该插件在 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 插件的重要说明

正如拉斐尔的回答所指出的那样。插件脚本中存在差异，这将导致它在 jQuery 的更高版本（1.9+）中一起崩溃。您可以使用我上面的代码来替换该行并为更高版本的 jQuery 修复插件。

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

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

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

http://jsfiddle.net/s8Pmv/

于 2013-06-28T19:22:16.763 回答