Home >Backend Development >PHP Tutorial >jQuery使用html()设置的内容中含有jQuery代码时,IE浏览器反应迟缓。

jQuery使用html()设置的内容中含有jQuery代码时,IE浏览器反应迟缓。

WBOY
WBOYOriginal
2016-06-06 20:32:111122browse

最近尝试开发一个简单的在线报表,基本工作流程如下:

index.html页面中有一DIV元素,id="div_result",默认没有任何内容;
index.html页面有一段jQuery代码,作用是使用$.get()/test.php 发送请求,返回的内容一个表格 的html代码,使用$("#div_result").html()输出到当前页面的div元素中。

这段返回的html代码(表格)中含有jQuery代码,作用是处理表格样式(隔行变色,选中行高亮显示)。

出现的问题:
chrome浏览器中:快速在表格上移动鼠标,选中行高亮的特效响应速度非常快。
在所有IE浏览器中:上述特效出现明显的卡顿现象,无论表格行数多少都是如此。

停掉$("div_result").html(),手动在index.html中的div元素下面加入一静态表格并填充测试数据,使用相同的jQuery代码处理表格特效,chrome和IE响应速度都非常快。

主要代码如下:

<code><br><br><div id="result_div"></div>




<script>
function get_data(tb_typ) {
        $.ajax({
            type:"get",
            url:"result.php",
            data:"table_type="+tb_typ,
            cache:false,
            success:function(data){$('#result_div').html(data);},
            databype:"html"}
        )
}

$(document).ready(function(){
    var dataVal = "orders";
    get_data(dataVal);

    //隔行变色,选中高亮
    var tb_obj = $('#my_table');
    tb_obj.find('tr:even').addClass('row_even');
    tb_obj.find('tr:odd').addClass('row_odd');
    
    tb_obj.find('tr').not(':first')
        .mouseover(function(){
        $(this).addClass('tr_over');
    })
        .mouseout(function(){
        $(this).removeClass('tr_over');
    });
});
</script>


</code>

回复内容:

最近尝试开发一个简单的在线报表,基本工作流程如下:

index.html页面中有一DIV元素,id="div_result",默认没有任何内容;
index.html页面有一段jQuery代码,作用是使用$.get()/test.php 发送请求,返回的内容一个表格 的html代码,使用$("#div_result").html()输出到当前页面的div元素中。

这段返回的html代码(表格)中含有jQuery代码,作用是处理表格样式(隔行变色,选中行高亮显示)。

出现的问题:
chrome浏览器中:快速在表格上移动鼠标,选中行高亮的特效响应速度非常快。
在所有IE浏览器中:上述特效出现明显的卡顿现象,无论表格行数多少都是如此。

停掉$("div_result").html(),手动在index.html中的div元素下面加入一静态表格并填充测试数据,使用相同的jQuery代码处理表格特效,chrome和IE响应速度都非常快。

主要代码如下:

<code><br><br><div id="result_div"></div>




<script>
function get_data(tb_typ) {
        $.ajax({
            type:"get",
            url:"result.php",
            data:"table_type="+tb_typ,
            cache:false,
            success:function(data){$('#result_div').html(data);},
            databype:"html"}
        )
}

$(document).ready(function(){
    var dataVal = "orders";
    get_data(dataVal);

    //隔行变色,选中高亮
    var tb_obj = $('#my_table');
    tb_obj.find('tr:even').addClass('row_even');
    tb_obj.find('tr:odd').addClass('row_odd');
    
    tb_obj.find('tr').not(':first')
        .mouseover(function(){
        $(this).addClass('tr_over');
    })
        .mouseout(function(){
        $(this).removeClass('tr_over');
    });
});
</script>


</code>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn