Question

我一直在使用jquery根据从数据库中检索到的信息来附加/创建表。在localhost上测试代码时，附加工作正常，但是当我通过网络上传并尝试浏览网站时，似乎从数据库加载信息的速度很慢，而且当用户多次点击按钮时。附加也不止一次发生。这是我的代码：

$('.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（）

来实现它的工作

Answer 1

你需要做两件事：在最初点击按钮时禁用按钮，然后在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', '');
        }
    });
});

使用jquery追加元素非常慢

1 个答案: