使用jquery追加元素的速度非常慢 - Appending elements using jquery is very slow

Appending elements using jquery is very slow

我一直在使用jquery根据从数据库检索到的信息附加/创建一个表。当在本地主机上测试代码时，附加操作很好，但当我通过网络上传并尝试导航网站时，从数据库加载信息的速度似乎很慢，而且用户多次单击按钮。追加也不止一次。这是我的代码：

$('.viewemp').live("click", function () {
    empviewmodalctr = 1;
    var userid = $(this).attr("id");
        var empviewdata = {userid:userid,action:"viewempinfo"};
        $.ajax({                        
                url:"../includes/MC.Admin.ajax.php",
                type: "POST",
                data: empviewdata,
                success: function(empinfo) {
                    var empJson = $.parseJSON(empinfo);
                    $("#employeeinfo_tbl").html(empJson.empinfo);   
                    $("#employeeemploymentinfo_tbl").html(empJson.empempinfo);      
            $('#employee-view').bPopup({
                modalClose: false
             });
                }
        });

页码：

<div id = "employee-view">
<div id = 'employee-view-container'>
    <div id = 'employee-view-container-title'>Employee's Information</div>
    <div class = 'closebtn'><img src = '../images/close.png' style ='"width:100%;height:100%;'/></div>
        <div id = 'employee-view-container-content-left'>
            <table id = 'employeeinfo_tbl'>
            </table>
        </div>
        <div id = 'employee-view-container-content-right'>
            <table id = 'employeeemploymentinfo_tbl'>
             </table>
        </div>
 </div>

我重新设计了我的元素，正确地使用ajax调用，并且仍然使用.html（）

您需要做两件事：在最初点击按钮时禁用它，然后在AJAX调用完成后重新启用它，所以将jquery修改为：

$('.viewemp').live("click", function () {
    var clicked = this;
    $(clicked).attr('disabled', 'disabled');
    empviewmodalctr = 1;
    var userid = $(this).attr("id");
    var empviewdata = {userid:userid,action:"viewempinfo"};
    $.ajax({                        
        url:"../includes/MC.Admin.ajax.php",
        type: "POST",
        data: empviewdata,
        success: function(empinfo) {
            var empJson = $.parseJSON(empinfo);
            $("#employee-view").html("<div id = 'employee-view-container'>"+
            "<div id = 'employee-view-container-title'>Employee's Information</div>"+
            "<div id = 'closebtn'><img src = '../images/closebtn.png' style ='"+                                        "width:100%;height:100%;'/></div></div>");
            var a = "<div id = 'employee-view-container-content-left'></div>"+
            "<div id = 'employee-view-container-content-right'></div>";
            $("#employee-view-container").append(a);
            var b = "<table id = 'employeeinfo_tbl'>";
            $("#employee-view-container-content-left").append(b);
            $("#employeeinfo_tbl").append(empJson.empinfo); 
            var empemploymentviewdata = {userid:userid,action:"viewempemploymentinfo"};
            $.ajax({                        
                url:"../includes/MC.Admin.ajax.php",
                type: "POST",
                data: empemploymentviewdata,
                success: function(empemployment) {
                    var empemploymentJson = $.parseJSON(empemployment);
                    var c = "<table id = 'employeeemploymentinfo_tbl' border = 0>";
                    $("#employee-view-container-content-right").append(c);
                    $("#employeeemploymentinfo_tbl").append(empemploymentJson.empempinfo);
                }
            });
            $("#employee-view-container").append("</table></div>");             
            $('#employee-view').bPopup({
            modalClose: false
            });
        },
        complete: function() {
            $(clicked).removeAttr('disabled', '');
        }
    });
});