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

Question

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

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);
}

我在单击某个跨度时调用此函数。这些跨度标签在另一个函数中的 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);
        }
    }
}

请帮帮我。

Answer 1

你在这里使用了 RECURSION..

函数changeTextAdd在行自己调用

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

并且点击事件处理程序在函数内部无限反弹..请检查并通过“递归”