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?

Well, after some testing, I found IE is not detecting a li click because your plugin is not applying in IE. Instead only ` — SpYk3HH, Jun 28 '13 at 19:16
Or maybe it is being applied and this is how it is applied in IE — SpYk3HH, Jun 28 '13 at 19:16
Are you just trying to get an event to fire when the user changes the selected option? Why not use the `change` option? See the second example on this page: http://jamielottering.github.io/DropKick/ — Jason P, Jun 28 '13 at 19:19
Somehow i missed this in the dropkick documentation, but that's exactly what a need, thanks — Thiago, Jul 01 '13 at 15:08

score 4 · Answer 1 · answered Jun 28 '13 at 19:32

4

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.

answered Jun 28 '13 at 19:32

Rafael

2,827
1
16
17

Ouch! I hadn't read the script yet, but if that's the check they are doing, that's really going to hurt them. I could have sworn jQuery deprecated `$.browser` at like version 1.9, which means that plugin wont work with newer jQuery. I have to check the docs, but I'm sure they removed it somewhere in their latest updates. – SpYk3HH Jun 28 '13 at 19:35
yup, go [**here**](http://jsfiddle.net/rYKcz/) and watch the console. watch what happens when the plugin runs. it breaks with jQuery 1.9! ack! no beuno! Of course, he could just replace that line with code from my answer, gonna plus you for that find, good sir! – SpYk3HH Jun 28 '13 at 19:36

score 3 · Accepted Answer · edited May 23 '17 at 11:44

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/

Thanks! Can't believe i've missed the change event from Dropkick, that's exaclty what i needed! Now i just need to fix the problem with the ie10 identification... I guess this wasn't a good choice of plugin — Thiago, Jul 01 '13 at 15:06

Jquery event not binding to hidden div in IE

2 Answers2

UPDATE! Scroll to bottom

A key note about Dropkick plugin