Javascript jQuery Ajaxcall使所有浏览器崩溃

我有一个（重）函数，它从php/sql中获取一些数据，然后用html呈现。当我第一次加载页面时，我调用了这个函数，一切都很好。当我点击一个按钮时，我也会在其他ajax调用成功后调用这个函数，但随后我的浏览器会冻结并崩溃。我在Firefox和Chrome中遇到一个错误（页面无响应）

这里是（重）功能：

---

有人给我一个指针吗？

我没有50个代表，所以我还不能发表评论。但是，你不能把那块HTML格式转换成PHP文档，然后使用AJAX调用PHP并返回结果吗？然后使用$table.append（结果）

Ex）

jQuery（document）.on（'click'，'.menuItem'，function（））
{   
event.preventDefault（）；
var maincegory=$（this.attr（'id'）.split（'xx'）[0]；
$.ajax（{
url:“/php/SubMenuBar.php”，不要将行一次一行地附加到DOM中，而是将它们连接到一个字符串中，然后一次添加所有行

function getMinerAttributesByType(type) {
    $.ajax({
        type    : "POST",
        url     : "/app/ajax/DataminerAjax.php",
        dataType: "json",
        timeout : 8000,
        data    : {getMinerAttributesByType:type}
    }).success(function(json){
        var $tableConfigured = $("#keywordsgroupsConf tbody");
        var $tableUnconfigured = $("#keywordsgroups tbody");
        var rowsConfigured = '', rowsUnconfigured = '';
        $.each(json, function(key, value){
            var row = '<tr>' +
                '<td>' + value.name + '</td>' +
                '<td><button class="btn btn-info" data-toggle="collapse" data-target="#'+ value.id+'-subs" data-id="'+ value.id +'" data-init="0">Config</button></td>' +
                '</tr>' +
                '<tr class="dataset">' +
                '<td colspan="2" class="subrow">' +
                '<div style="background:#eee;" class="accordian-body collapse" id="'+ value.id+'-subs">' +
                '<table style="margin-bottom: 10px;" class="table" id="table-' + value.id + '" data-id="' + value.id + '">'+
                '<tbody>' +
                '</tbody>' +
                '</table>'+
                '<div style="margin-left:10px;" class="input-append">'+
                '<input type="text" placeholder="Keywordgroup name">'+
                '<button class="btn btn-create-keywordgroup" data-id="' + value.id + '"><i class="icon icon-plus"></i> Add</button>'+
                '<button class="btn btn-success btn-mark-as-c" data-id="' + value.id + '"><i class="icon-white icon-check"></i> Mark as configured</button>' +
                '</div>' +
                '</div>' +
                '</td>'+
                '</tr>';
            if (value.configured == 0) {
                rowsUnconfigured += row;
            } else {
                rowsConfigured += row;
            }
        });
        $tableConfigured.html(rowsConfigured);
        $tableUnconfigured.html(rowsUnconfigured);
    });
}

函数getMinerAttributesByType（类型）{
$.ajax({
类型：“POST”，
url:“/app/ajax/DataminerAjax.php”，
数据类型：“json”，
超时：8000，
数据：{getMinerAttributesByType:type}
}).success（函数（json）{
var$tableConfigured=$（“#关键字组conf tbody”）；
var$tableUnconfigured=$（“#关键字组tbody”）；
var rowsConfigured=''，rowsUnconfigured=''；
$.each（json、函数（键、值）{
变量行=“”+
“”+value.name+“”+
“配置”+
'' +
'' +
'' +
'' +
''+
'' +
'' +
''+
''+
''+
“添加”+
“标记为已配置”+
'' +
'' +
''+
'';
如果（value.configured==0）{
rowsUnconfigured+=行；
}否则{
rowsConfigured+=行；
}
});
$tableConfigured.html（行配置）；
$tableUnconfigured.html（rowsUnconfigured）；
});
}

您考虑过对数据进行分页吗？我不确定是不是渲染速度太慢，所以如果是肯定的话。我现在正在测试，因为您的表是在基于“来自php/sql的数据”的

.success（）

部分创建的，为什么不让php来处理和显示呢？AJAX调用返回多少行？大约500行，4列回答很好，但仍然被冻结。奇怪的是，第一次调用它工作，但第二次它冻结了第一次相同的行数？

$(document).on("click", ".btn-mark-as-c", function(){
    if (confirm("Are you sure you want to mark this attribute as configured?")) {
        $this = $(this)
        var id = $this.attr("data-id");
        $.ajax({
            type    : "POST",
            url     : "/app/ajax/DataminerAjax.php",
            dataType: "json",
            data    : {updateMinerAttributeState:id, state:1}
        }).success(function(json){
            if (json.status == "success") {
                // crashes here in this call of the heavy function
                getMinerAttributesByType(1);
            } else {
                alert("There was an error!");
            }
        });
    }
});

    <script type="text/javascript">
    jQuery(document).on('click', '.menuItem', function()
    {   
        event.preventDefault();
        var mainCategory = $(this).attr('id').split('xx')[0];
            $.ajax({                                                          
                  url: '/php/SubMenuBar.php',  <----- Access the PHP file.       
                  data: {
                          MainCategory: mainCategory, <---- Parameters for the PHP file (declared using $_GET() in the PHP file)
                        },

                  success: function(result) <--- Result becomes the output from the PHP file
                  {
                        $table.append(result); 
                  }
                });     

function getMinerAttributesByType(type) {
    $.ajax({
        type    : "POST",
        url     : "/app/ajax/DataminerAjax.php",
        dataType: "json",
        timeout : 8000,
        data    : {getMinerAttributesByType:type}
    }).success(function(json){
        var $tableConfigured = $("#keywordsgroupsConf tbody");
        var $tableUnconfigured = $("#keywordsgroups tbody");
        var rowsConfigured = '', rowsUnconfigured = '';
        $.each(json, function(key, value){
            var row = '<tr>' +
                '<td>' + value.name + '</td>' +
                '<td><button class="btn btn-info" data-toggle="collapse" data-target="#'+ value.id+'-subs" data-id="'+ value.id +'" data-init="0">Config</button></td>' +
                '</tr>' +
                '<tr class="dataset">' +
                '<td colspan="2" class="subrow">' +
                '<div style="background:#eee;" class="accordian-body collapse" id="'+ value.id+'-subs">' +
                '<table style="margin-bottom: 10px;" class="table" id="table-' + value.id + '" data-id="' + value.id + '">'+
                '<tbody>' +
                '</tbody>' +
                '</table>'+
                '<div style="margin-left:10px;" class="input-append">'+
                '<input type="text" placeholder="Keywordgroup name">'+
                '<button class="btn btn-create-keywordgroup" data-id="' + value.id + '"><i class="icon icon-plus"></i> Add</button>'+
                '<button class="btn btn-success btn-mark-as-c" data-id="' + value.id + '"><i class="icon-white icon-check"></i> Mark as configured</button>' +
                '</div>' +
                '</div>' +
                '</td>'+
                '</tr>';
            if (value.configured == 0) {
                rowsUnconfigured += row;
            } else {
                rowsConfigured += row;
            }
        });
        $tableConfigured.html(rowsConfigured);
        $tableUnconfigured.html(rowsUnconfigured);
    });
}