Jquery event not binding to hidden div in IE

Question

I'm using the JQuery 1.8.3 and the Dropkick plugin to customize select's in my site. (https://github.com/JamieLottering/DropKick).

The dropkick plugin generates an HTML like this:

<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>

The problem is, i need to do some specific things when the user clicks on one of the options, so i binded an event to the click on the option, like below:

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

It works well in Chrome and Firefox, but in IE (i've tried IE10, IE9 and IE8) it doesn't work.

Here's a jsfiddle that shows the problem: http://jsfiddle.net/NPRPf/2/

I've tried using .bind() and .on(), but none of them worked in IE (and both worked on the other browsers). I've also tried changing the css of the dk_options to "visibility:hidden" instead of "display:block", but it also didn't work.

Does anyone have any idea of what might be going on?

Answer 1

UPDATE! Scroll to bottom

After some playing around with it, I found the problem to be that the plugin does not work the same in IE that it does in Chrome. In IE, the clicks are taking place on option tags, not on the div's inner li's.

So for instance, this works in IE:

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

http://jsfiddle.net/h3Py6/

But not in Chrome.

Perhaps you need an "if browser" type statement?

Something like:

$('.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/

---

A key note about Dropkick plugin

As pointed out by rafael's answer. There is a differential in the plugin script that will cause it to crash all together in later (1.9+) versions of jQuery. You could use something like my code above to replace that line and fix the plugin for later versions of jQuery.

To learn more about detecting IE and versions in JS, THIS is by far one of the best and easiest to implement solutions I have seen.

---

As noted in another comment I saw, DropKick has a change event of it's own. That would probably be the best place to utilize your code. However, this still seems to fail in IE10, but it works in 9!

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

http://jsfiddle.net/s8Pmv/

Answer 2

The problem with IE 10 is on the DropKick plugin on the file jquery.dropkick.1-0.1.js line 186, there is a comparison to test if the browser is IE 6, for IE 10 and newer this comparison is true, given that in line 17 it checks this:

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

Obviously this will report IE 10 as IE 1 and so it will be considered IE 6 or older.