虽然逐行调试在javascript中填充，但没有调试代码不起作用！ [英] While debugging line by line dropdown populates in javascript but without debug code doesn't work!

问题描述

我正在创建一个附加的div，其中我正在显示文本区域，下拉列表（城市）和依赖下拉列表（位置）。

当我使用firebug附加div时，我们得到一个div和这个城市里面的下拉值充满了价值。当我在没有调试器的情况下运行它时它不起作用。

请查看下面的代码：

< script type =   text / javascript> 
 $（ document ）。ready（ function （）{
  var  counter =  0 ; 
 $（ ＃addButton）。on（  click， function （）{
  if （counter>  19 ）{
 alert（ 仅允许20个地址）; 
  return   false ; 
} 
 
 
  var  elems = ' < div class =col-lg-5id =Address' + counter + ' > + 
 ' & lt; textarea class =form-controlname =alt_address []rows =3占位符=地址' +（计数器+ 1）+ ' < span class =code-string>/>< div class =col-lg-6 form-group col-lg-offset-6> < / div>' + 
 ' < div class =col-lg- 3表格组id =city' + counter + ' > + 
 ' & lt; select name =city_name []id =city_name' + counter + ' class =form-control>& lt; option value =selected = 已选择>选择城市& lt; /选项>& lt; / select>' + 
 ' < / div>< div class =col-lg-3 form-group>& lt; select name =locality_name []id =locality_name' + counter + ' class =form-control>& lt; option value =selected =selected >选择地区& lt; /选项>& lt; / select>< / div>< / div> ' + 
 ' < div class =col-lg-1 form-group >' + 
 ' & lt; button type =buttonclass = removebtnid =removeButton' + counter + ' >' + 
 ' < span class =glyphicon glyphicon-minus>< / span>& lt; /按钮>' + 
 ' < / div>< div class =col- lg-6 form-group col-lg-offset-6> < / div>'; 
 
 
 $（' ＃addressDiv'）。append（ elems的）; 
 
 
 $ .ajax（{
 
 type： 发布，
 
 url：  city_load.php，
 
成功： function （html）{
 $（ ＃city_name + counter）.html（html）; 
} 
 
}）; 
 
 
 $（ ＃city_name + counter）。 on（  change， function （ ）{
 
 
 $ city_id = $（ this ）。val（）; 
 
 $。 ajax（{
 
类型： 发布，
 
 url：  ajax-dd3ck.php，
 
 data ：  city_id = + $ city_id，
 
 cache：  false，
 
成功： function （html）{
 
 $（ ＃locality_name + counter）.html（html） ; 
 
} 
 
}）; 
 
 
}）; 
 counter ++; 
  return   false ; 
}）; 
 
}）; 

解决方案

（ document ）。ready（ function （）{
var counter = 0 ;

（ ＃addButton ）。on（ 点击，功能（）{
if （counter> 19 ）{
alert（ 仅允许20个地址）;
return false ;
}


var elems = ' < div class =col -lg-5id =地址' + counter + ' > +
' & lt; textarea class =form-controlname =alt_address []rows =3占位符=地址' +（计数器+ 1）+ ' />< ; div class =col-lg-6 form-group col-lg-offset-6> < / div>' +
' < div class =col-lg- 3表格组id =city' + counter + ' > +
' & lt; select name =city_name []id =city_name' + counter + ' class =form-control>& lt; option value =selected = 已选择>选择城市& lt; /选项>& lt; / select>' +
' < / div>< div class =col-lg-3 form-group>& lt; select name =locality_name []id =locality_name' + counter + ' class =form-control>& lt; option value =selected =selected >选择地区& lt; /选项>& lt; / select>< / div>< / div> ' +
' < div class =col-lg-1 form-group >' +
' & lt; button type =buttonclass = removebtnid =removeButton' + counter + ' >' +
' < span class =glyphicon glyphicon-minus>< / span>& lt; /按钮>' +
' < / div>< div class =col- lg-6 form-group col-lg-offset-6> < / div>';

（' ＃addressDiv 。）追加（elems的）;

I am creating a appended div in which I am displaying a text area, a dropdown(city) and a dependent dropdown(locality).
When I append a div while using firebug we get a div and the dropdown inside this city gets filled with value for.When I run the same without debugger it doesn't work.
Please have a look on my code below:

<script type="text/javascript">
$(document).ready(function () {
    var counter = 0;
    $("#addButton").on("click",function () {
            if (counter > 19) {
                alert("Only 20 Address allowed");
                return false;
            }


        var elems = '<div class="col-lg-5"  id="Address' + counter + '">'+
              '&lt;textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter+1) + '" /><div class="col-lg-6 form-group col-lg-offset-6"> </div>' +
              '<div class="col-lg-3 form-group" id="city' + counter + '">'+
              '&lt;select name="city_name[]" id="city_name' + counter + '" class="form-control">&lt;option value="" selected ="selected">Select City&lt;/option>&lt;/select>' +
              '</div><div class="col-lg-3 form-group">&lt;select name="locality_name[]" id="locality_name' + counter + '" class="form-control">&lt;option value="" selected="selected" >Select Locality&lt;/option>&lt;/select></div></div>' +
              '<div class="col-lg-1 form-group">'+
              '&lt;button type="button" class="removebtn" id="removeButton' + counter + '">' +
              '<span class="glyphicon glyphicon-minus"></span>&lt;/button>' +
              '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>' ;


        $('#addressDiv').append(elems);


            $.ajax({

            type:"Post",

            url:"city_load.php",

            success:function(html){
                $("#city_name" + counter).html(html);
            }

            });


        $("#city_name" + counter).on("change",function(){


        $city_id = $(this).val();

        $.ajax({

            type:"Post",

            url:"ajax-dd3ck.php",

            data:"city_id="+$city_id,

            cache:"false",

            success:function(html){

                $("#locality_name" + counter).html(html);

            }

            });


         });
            counter++;
         return false;
    });

});

解决方案

(document).ready(function () { var counter = 0;

("#addButton").on("click",function () { if (counter > 19) { alert("Only 20 Address allowed"); return false; } var elems = '<div class="col-lg-5" id="Address' + counter + '">'+ '&lt;textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter+1) + '" /><div class="col-lg-6 form-group col-lg-offset-6"> </div>' + '<div class="col-lg-3 form-group" id="city' + counter + '">'+ '&lt;select name="city_name[]" id="city_name' + counter + '" class="form-control">&lt;option value="" selected ="selected">Select City&lt;/option>&lt;/select>' + '</div><div class="col-lg-3 form-group">&lt;select name="locality_name[]" id="locality_name' + counter + '" class="form-control">&lt;option value="" selected="selected" >Select Locality&lt;/option>&lt;/select></div></div>' + '<div class="col-lg-1 form-group">'+ '&lt;button type="button" class="removebtn" id="removeButton' + counter + '">' + '<span class="glyphicon glyphicon-minus"></span>&lt;/button>' + '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>' ;

('#addressDiv').append(elems);

这篇关于虽然逐行调试在javascript中填充，但没有调试代码不起作用！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！