Jquery 所有浏览器中的无响应脚本错误

我对这个无响应的脚本错误非常恼火，这是我的代码

function changeTextAdd(id)
{

    $(".awp_class_horizantal span").html('');
    $(".awp_class_horizantal").click(function() {
            changeTextAdd(this.id);
        });
    $(".awp_class_vertical span").html('');
    $(".awp_class_vertical").click(function() {
            changeTextAdd(this.id);
        });
    $(".awp_class_vertical2 span").html('');
    $(".awp_class_vertical2").click(function() {
            changeTextAdd(this.id);
        });

    for(var i=0; i<addtionalspanIds.length;i++)
    {

        if($("#"+addtionalspanIds[i]+"_txt").val().length > 0)
        {    
            // console.log(addtionalspanIds[i]+"if");
            $("#"+addtionalspanIds[i]+' span').html($("#"+addtionalspanIds[i]+"_txt").val());
        }else {
            // console.log(addtionalspanIds[i]+"else");
            $("#"+addtionalspanIds[i]+' span').html('');
        }
    }
    var defaultValue = '';
    if($("#"+id+"_txt").val().length > 0){        
        defaultValue = "<option value='"+$("#"+id+"_txt").val()+"'>"+$("#"+id+"_txt").val()+"</option>";
    }
    $('#'+id+' span').html("<select id='"+id+"_spanSelectBox' class='spanSelectBox' name='span1' style='width:"+(cellWidth-2)+"px;z-index:1000;'>"+defaultValue+"<option value=''>--select--</option><option value='Wall panel'>Wall panel</option><option value='DRAPE'>DRAPE</option></select>");

    $("#"+id).attr('onclick','').unbind('click');
    $(".spanSelectBox").on('change', whenSpanSelectChangedAdd);
}

我在单击某个跨度时调用此函数。这些span标记位于另一个函数的for循环中。在firefox中，显示无响应的脚本是jquery-1.7.1.min.js。为什么它指向jquery库

这是我调用上述函数的循环形式

for(var i=1; i<=sidewalls; i++)
{
    for(var j=1; j<=backwalls; j++)
    {
        ////////////////////// First Row in the diagram ///////////////////
        //console.log(i+"  "+j);
        if((i == 1 && j < backwalls))
        {

            var countVer = count++;

            var newDiv = "<span class='add_droppable_span_class' id='add_droppable"+i+""+j+"' style='width:"+(cellWidth-2)+"px; height:"+(cellHeight-2)+"px;display:inline-block;margin:0px;padding:1px;float:left;'><span class='awp_class_vertical' id='awp_span_"+countVer+"' style=' height:"+(cellHeight-2)+"px;'  onclick='changeTextAdd(this.id);'><span style='position:relative; top:40%; white-space: nowrap; left:-9px;'></span></span></span><input type='hidden' name='awp_span_"+countVer+"_txt' id='awp_span_"+countVer+"_txt'>";
            $("#inner_div_addtional").append(newDiv);
        }                        
        ////////////////////// Second Row except last block  ///////////////////
        else if(i > 1 && j < backwalls && i != sidewalls) 
        {
            var countHor = count++;
            var countVer = count++;
            var newDiv = "<span class='add_droppable_span_class' id='add_droppable"+i+""+j+"' style='width:"+(cellWidth-2)+"px; height:"+(cellHeight-2)+"px;display:inline-block;margin:0px;padding:1px;float:left;'><span class='awp_class_horizantal' id='awp_span_"+countHor+"' style='width:"+(cellWidth-2)+"px;'    onclick='changeTextAdd(this.id);'><span></span></span><span class='awp_class_vertical2' id='awp_span_"+countVer+"' style=' height:"+(cellHeight-2)+"px;'  onclick='changeTextAdd(this.id);'><span style='position:relative; top:40%; white-space: nowrap; left:-9px;'></span></span></span><input type='hidden' name='awp_span_"+countHor+"_txt' id='awp_span_"+countHor+"_txt'><input type='hidden' name='awp_span_"+countVer+"_txt' id='awp_span_"+countVer+"_txt'>";

            $("#inner_div_addtional").append(newDiv);
        }else if(i == sidewalls && j < backwalls) ///////// Last Row except last block//////////////
        {
            var countHor = count++;
            var countHor2 = count++;
            var countVer = count++;
            var newDiv = "<span class='add_droppable_span_class' id='add_droppable"+i+""+j+"' style='width:"+(cellWidth-2)+"px; height:"+(cellHeight-2)+"px;display:inline-block;margin:0px;padding:1px;float:left;'><span class='awp_class_horizantal' id='awp_span_"+countHor+"' style='width:"+(cellWidth-2)+"px;'    onclick='changeTextAdd(this.id);'><span></span></span><span class='awp_class_vertical2' id='awp_span_"+countVer+"' style=' height:"+(cellHeight-2)+"px;'  onclick='changeTextAdd(this.id);'><span style='position:relative; top:40%; white-space: nowrap; left:-9px;'></span></span><span class='awp_class_horizantal' id='awp_span_"+countHor2+"' style='width:"+(cellWidth-2)+"px;top:-19px;' onclick='changeTextAdd(this.id);'><span></span></span></span><input type='hidden' name='awp_span_"+countHor+"_txt' id='awp_span_"+countHor+"_txt'><input type='hidden' name='awp_span_"+countVer+"_txt' id='awp_span_"+countVer+"_txt'><input type='hidden' name='awp_span_"+countHor2+"_txt' id='awp_span_"+countHor2+"_txt'>";
            $("#inner_div_addtional").append(newDiv);
        }
        ////////////////////// Starting From Second row all last blocks ///////////////////
        else if((i > 1 && j == backwalls) && (i != sidewalls))
        {
            var countHor = count++;
            var countVer = count++;
            var newDiv = "<span class='add_droppable_span_class' id='add_droppable"+i+""+j+"' style='width:"+(cellWidth-2)+"px; height:"+(cellHeight-2)+"px;display:inline-block;margin:0px;padding:1px;float:left;'><span class='awp_class_horizantal' id='awp_span_"+countHor+"' style='width:"+(cellWidth-2)+"px;'    onclick='changeTextAdd(this.id);'><span></span></span></span><input type='hidden' name='awp_span_"+countHor+"_txt' id='awp_span_"+countHor+"_txt'><input type='hidden' name='awp_span_"+countVer+"_txt' id='awp_span_"+countVer+"_txt'>";
            $("#inner_div_addtional").append(newDiv);
        }else if(i == sidewalls && j == backwalls) ///////// Last Row Last Block//////////////
        {
            var countHor = count++;
            var countHor2 = count++;
            var countVer = count++;
            var newDiv = "<span class='add_droppable_span_class' id='add_droppable"+i+""+j+"' style='width:"+(cellWidth-2)+"px; height:"+(cellHeight-2)+"px;display:inline-block;margin:0px;padding:1px;float:left;'><span class='awp_class_horizantal' id='awp_span_"+countHor+"' style='width:"+(cellWidth-2)+"px;'    onclick='changeTextAdd(this.id);'><span></span></span><span class='awp_class_horizantal' id='awp_span_"+countHor2+"' style='width:"+(cellWidth-2)+"px;top:"+(cellHeight-19)+"px;' onclick='changeTextAdd(this.id);'><span></span></span></span><input type='hidden' name='awp_span_"+countHor+"_txt' id='awp_span_"+countHor+"_txt'><input type='hidden' name='awp_span_"+countVer+"_txt' id='awp_span_"+countVer+"_txt'><input type='hidden' name='awp_span_"+countHor2+"_txt' id='awp_span_"+countHor2+"_txt'>";
            $("#inner_div_addtional").append(newDiv);
        }                    
        else
        {
            var newDiv = "<span id='add_droppable"+i+""+j+"' style='width:"+(cellWidth-2)+"px; height:"+(cellHeight-2)+"px;display:inline-block;margin:0px;padding:1px;float:left;'></span><input type='hidden' name='add_droppable"+i+""+j+"_txt' id='add_droppable"+i+""+j+"_txt'>";
            $("#inner_div_addtional").append(newDiv);
        }
    }
}

---

请帮帮我。

您在这里使用了递归

函数changeTextAdd在

$(".awp_class_horizantal span").html('');
$(".awp_class_horizantal").click(function() 
{
    changeTextAdd(this.id); // Here is your Recursion of the same function 
});

---

单击事件处理程序在函数中无限反弹。。请检查并浏览有关递归的内容

很难判断这里发生了什么-不清楚一些循环变量来自何处。我推荐几件事：1。应该缓存循环检查，而不是检查某些内容的长度。你确定不管你检查的是什么，它的长度不会因为循环中发生的事情而增加吗？2.避免在循环中进行DOM操作。在循环之外构建标记，并在一个操作中修改它。这绝对是扼杀你剧本表现的好方法。谢谢你宝贵的建议。。你能建议我如何在我的情况下调用函数吗？？？请缩短你的问题。。和代码。。只要问问问题的实质是什么。经历一下。。