隐藏在IE7中,jQuery UI按钮仍然可见

时间:2010-11-22 00:33:17

标签: jquery jquery-ui internet-explorer-7

这个错误让我非常疯狂。

我正在尝试使用jQuery 1.4.4过滤掉许多复杂的表行。

这些行包含使用jQuery UI 1.8.5设置样式的<input type="button" />个元素。

此屏幕截图显示未应用搜索过滤器时行的外观。 Correct Row layout

这些行是通过AJAX后调用动态添加的,并在模板化后插入。这是后调用的JS代码。

$.post($.url('Asset/GetSites/'), { assetType: assetType, siteType: siteType }, function (data) {
    //hide the progress spinner
    $('.progSpinner').fadeOut();
    if (data.error) {
        ShowErrorBar();
        return;
    }
    $('#SiteRowTemplate').tmpl(data).appendTo(tbody);
    $('#assetTable input[type=button]').button();

    //tbody.hide().fadeIn();

    //trigger a sort
    $('#assetTable').trigger('update');
    $('#assetTable').trigger('sorton', [[[0, 0]]]);

    $('#pageLbl').text(assetTypeName + ' Assets: ' + siteTypeName);
});

然后我使用基本文本输入来根据站点和描述列进行过滤。这就是问题出现的地方。这是代码:

var rows = $('#assetTable tbody tr.assets-site-row');
rows.each(function () {
    var row = $(this);
    var id = row.attr('id');

    if (row.attr('id').toLowerCase().indexOf(val) != -1 ||
    row.children('td').text().toLowerCase().indexOf(val) != -1) {
        //Search is a match
        row.show();
        $('#details' + id).show();
    }
    else {
        //Search is not a match
        row.hide();
        $('#details' + id).hide();
    }
});

在Chrome,IE8,Firefox中,这可以正常使用。不属于搜索查询的行被正确隐藏,但在IE7中,事情就会被破坏。 Failed table layout

对于假设隐藏的行,您可以看到jQuery UI按钮未正确隐藏在视图中。如果我打开开发人员工具并关闭内联diplay:none样式并关闭特定的“隐藏”行,则该行会正确隐藏。

我基本上都是以这个为止。有人有什么建议吗?

1 个答案:

答案 0 :(得分:2)

我曾经有过这样的随机问题,过去发生了动态添加的孩子。基本上我必须调用.children().hide();,然后在父母上调用hide。我能找到的最好的是子元素在IE的DOM中正确映射。