JQuery сбой IE 9 - PullRequest
Новая
       10

JQuery сбой IE 9

0 голосов
/ 19 марта 2012

Я максимально расширил код, чтобы воспроизвести ошибку, и поместил ее в jsfiddle:

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

Если дважды щелкнуть второй флажок, IE9 перестает работать. Также происходит сбой мобильного IE9 на телефоне Windows.

Об этом было сообщено в Microsoft и подтверждено как ошибка (но не угроза безопасности). Итак, сейчас ищем другое решение для этого. В основном ищет, чтобы скрыть / показать строки таблицы, когда отмечен флажок с помощью 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');
        }
    });

});

Ответы [ 2 ]

4 голосов
/ 19 марта 2012

Основываясь на экспериментах, проблема заключается в использовании hide для строки таблицы, когда за ней следует строка с colspan.Странная ошибка.

Решение: не делай этого.Похоже, что в вашем конкретном случае, colspan так что вы можете поставить hr между категориями.В любом случае это лучше сделать с помощью CSS, например: 

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

... и удалить ненужные строки. Вот так.

0 голосов
/ 19 марта 2012

Помимо ошибки, которую он выдает в IE9, вы можете значительно сократить используемый код: http://jsfiddle.net/MwS8K/59/

update: и да, рекомендуется не использовать hr в таблице, в любом случае семантически неверно.

обновление 2: вот код: 

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