Question

I have a list of div elements created with javascript on the page that have the format:

<div id="UniqueID" class="request">
    <div class="request_main"></div> //VISIBLE
    <div class="request_info"></div> //HIDDEN
</div>

On clicking a div, the jQuery click listener handles a click event on the request_main element and searches the parent div for the request_info div. It then shows the request_info div if it’s not already visible.

$(".request_main").live('click', function() {       
    $(".nrl").removeClass('blue').addClass('grey');                 
    if ($(this).parent().find(".request_info").css('display') == 'none') {
        $(".request_info").hide();  
        $(this).parent().find(".request_info").stop(false,true).show("slide", {direction:"up"}, 300, function(){});
        $(this).find(".nrl").removeClass('grey').addClass('blue');
        $(".links").removeClass('white').addClass('grey');
        $(".links").css('background-color','white');
        $(this).find(".links").removeClass('grey').addClass('white');
        $(this).find(".links").css('background-color','#1B75BB');
    }           
});

In Firefox, Safari, Chrome and even IE9 this works fine. In IE8 however, the function works only on divs that haven’t been clicked before e.g. Click on UniqueID_1 -> request_info displays. Click on UniqueID_2 -> request_info displays. Click on UniqueID_1 a second time -> nothing happens.

alert($(this).parent().find(".request_info").css('display'));

This statement returns none and block on each click with the working browsers. In IE8 this returns none and block the first time, then undefined after that (when clicking on the same div). This happens even if I explicitly set the values for the div in the function to none and block after the show and hide calls.

Answer 1

Try with the following code:

$(".request_main").live('click', function(e) {
  e.stopPropagation();
});