Jquery script works in firefox but not IE 8

Question

Hi I have a jquery script that allows the entire cells of two tables to be clicked on, when clicked they change their background colour. You can then click a form button and the selected cells are processed to a database.

The script works on in firefox and on the iPads browser.

It doesn't work in IE 8 though (which is part of the SOE so can't be changed at the moment)

The jquery script is

$(document).ready(function() {
//assigning alternative row style
$(".pretty tr:even").addClass("evenrow");
$(".pretty tr:odd").addClass("oddrow");

$(".my_table tr").find(':checkbox').prepend('<img id="tableSquare" src="images/square.png" />');


$(".pretty tr:even").click(function() {
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
    if ($(this).find(':checkbox').attr('checked')) {
        $(this).removeClass('evenrow');
        $(this).addClass('highlight');


    }
    else {
        $(this).removeClass('highlight');
        $(this).addClass('evenrow');
    }
});
$(".pretty tr:odd").click(function() {
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
    if ($(this).find(':checkbox').attr('checked')) {
        $(this).removeClass('oddrow');
        $(this).addClass('highlight');
    }
    else {
        $(this).removeClass('highlight');
        $(this).addClass('oddrow');
    }
});

});

In IE 8 you can click on the cells for one of the tables only, and it will only work once, if you refresh the page it won't work after that.

Using jquery 1.6.4.

Here is a partially working example of what everything does. http://jsfiddle.net/unauu/23/

Any ides what the script doesn't work in IE 8?

Answer 1

I had a similar problem once using .attr() in IE and tried to use .prop() instead, that solved my problem and, apparently, yours too, I believe.

http://jsfiddle.net/unauu/24/

I don't know why this happens.