CODEWITHSUNDEEP
jqueryinternet-explorer-9
Danny
Danny

Reputation: 2821

jQuery crashing IE 9

I stripped down the code as much as possible to reproduce the error and put it on jsfiddle:

http://jsfiddle.net/MwS8K/1/

Clicking the second tickbox twice crashes IE9. Also crashes IE9 mobile on Windows phone.

This has been reported to Microsoft and confirmed as a bug (but not a security risk). So, now looking for a different solution to this. Basically looking to hide/show table rows when a tickbox is clicked with jQuery. 

<input checked="checked" class="Category1" id="Category1"  type="checkbox"       value="true" />
<label for="Category1">
    Category 1</label>
<br />
<input checked="checked" class="Category2" id="Category2" type="checkbox" value="true" />
<label for="Category2">
Category 2</label>
<br />
<div class="product-table">
<table border="0" id="ProductTable">
    <tr>
        <th>
            Product Name
        </th>
        <th>
            Action
        </th>
    </tr>
    <tr class="Category1">
        <td>
            Product1
        </td>
        <td class="call-to-action">
            View
        </td>
    </tr>
    <tr>
        <td colspan="2">
             <hr />
        </td>
    </tr>
    <tr class="Category2">
        <td>
            Product 2
        </td>
        <td class="call-to-action">
            View
        </td>
    </tr>
     <tr>
        <td colspan="2">
             <hr />
        </td>
    </tr>
</table>


.product-table table td.call-to-action {
    border-top: 1px solid #DDD;
}

table { border-collapse: collapse; }


 $(document).ready(function () {
    $("input:checkbox").live("click", function () {
        if (this.checked) {
            var category = "#ProductTable tr." + $(this).attr("class");
            $(category).show('fast');

        } else {

            var category = "#ProductTable tr." + $(this).attr("class");
            $(category).hide('fast');
        }
    });

});

Upvotes: 0

Views: 1906

Answers (2)

Seimen
Seimen

Reputation: 7250

Besides the error it produces in IE9 you can drastically reduce the code used: http://jsfiddle.net/MwS8K/59/

update: and yeah it's recommendable not to use hr in a table, semantically incorrect anyways.

update 2: so then here is the code:

$(document).ready(function () {
    $(":checkbox").live("click", function () {
        $("#ProductTable tr." + $(this).attr('class')).toggle('fast');
    });
 });

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1073988

Based on experimentation, the problem is using hide on a table row when there is a row following it with a colspan. Weird bug.

The solution is: Don't do that. It looks like in your specific case, the colspan is so you can put an hr between categories. This is probably better done with CSS anyway, e.g.:

.product-table tr.Category1 td, .product-table tr.Category2 td {
    border-bottom: 1px solid #DDD;
}

...and removing the unnecessary rows. Like this.

Upvotes: 4

Related Questions