jQuery On在IE9中不起作用

Question

The following code works fine in all my CSS3 browsers except for IE9. Does anyone have an idea why? I have several divs of class dismdiv set up in big div with ID fpdiv. I should get alert boxes on enter and exit of each of my dimsdiv areas. But not in IE9 for some reason.

Thanks, in advance!

this.setDimsRoll = function() {
    $("#fpdiv").on({
        mouseenter : function() {
            alert("on")
        },
        mouseleave : function() {
            alert("off");
        }
    }, ".dimsdiv");
}

Some clarification. This is a method in a javascript 'class' thus, the 'this'. You can ignore that part. This gets called after the dimsdivs are created dynamically. That's why I opted for this method as a reslt of my other post:

Jquery - How to I add an event after dynamic create

Normally, I would just use hover or something else, but this was required to handle the dynamic objects.

Answer 1

I suspect that you should be binding to document object's event seeing as the elements are dynamically created. Something along the lines of:

this.setDimsRoll = function() {
    $(document).on({ 
        mouseenter: function () { 
            alert("on")
        }, 

        mouseleave: function () { 
            alert("off")
        } 
    }, '.dimsdiv');
}

Also on a side note your contexts seem slighly mixed up. Which element are you actually trying to bind the mouse events to .dimsdiv or #fpdiv ?

Answer 2

The solution was to fill the div with a clear pixel. Turns out that empty divs don't detect on IE. Thanks Microsoft!