0

I have a problem using the jQuery click event with IE7-8-9. I apply the event on a div. But on these two IE versions, I have to click on the text contained within the div to make the event work.

I don't understand because it was still normally working on these versions until I made a few changes (like adding the font css properties) but when I try to delete these changes it stil does not work as I want;

Here is a jsfiddle illustrating the situation and its full screen result.

http://jsfiddle.net/rC632/

function clickEvent(){

$('.answerDiv').click(function(){
    $( "div:animated" ).stop();
    if ( idPreviousClick === $(this)[0].id) {

    } else {
        if (idPreviousClick != -1) {
            $("#"+idPreviousClick).css({height:'100px', width:'100px', top:'0', 'line-height': '100px'});
            $("#"+idPreviousClick).parent().css({height:'100px', width:'100px', top:'0'});
        }
        $(this).animate({height:'120px', width:'120px', 'line-height': '120px'});
        $(this).parent().animate({height:'120px', width:'120px', top:'-10px'});
        idPreviousClick = $(this)[0].id;
    }
});

}

$(document).ready(function(){

clickEvent();

});

var idPreviousClick = -1;

http://jsfiddle.net/rC632/embedded/result/

Could you have any idea of what is missing ?

Thanks

user3665301
  • 5
  • 4

1 Answers1

0

This is due to the line filter: progid:DXImageTransform.Microsoft.gradient you are using in the css, it makes your div not clickable. I would recommend that you use an image for gradient.

TTFAN
  • 16
  • 1
  • I saddly can't use an image because the colours choice has to be free for the user. But I am not sure the gradient filter is the reason...because it worked a few hours ago, and the same filter was present. However, it works good if I remove the filter as you recommend. I will try to change the divs organisation and let you know if can find a way to conserve the filter and make the click work. – user3665301 Jun 09 '14 at 16:37