JQuery не правильно добавляет значения

Question

У меня есть фиксированный набор полей ввода при загрузке страницы. У меня есть флажки с отображаемыми значениями, и когда кто-то проверяет флажок, значения добавляются в поле ввода. Если все поля ввода заполнены, создается новый. Моя проблема заключается в том, что значения флажка правильно вставлены в существующие поля ввода, и если значение превышает, создается новое поле ввода, но значения не будут вставлены сразу же после создания поля ввода. Только на следующем клике - значения, вставленные в вновь созданное поле ввода. Вот код

<script> 
    function fillin(entire,name,id,key) { 
     if (entire.checked == true) { 
      var split_info = new Array(); 
      split_info = name.split(":"); 
      var div = $("#Inputfields"+id); 
      var till = (div.children("input").length)/4; 
      var current_count = 0; 
      for (var j=0;j<till;j++) { 
       if (document.getElementById("insertname_"+j+"_"+id).value == "" && document.getElementById("insertnumber_"+j+"_"+id).value == "") { 
        document.getElementById("insertname_"+j+"_"+id).value = split_info[0]; 
        document.getElementById("insertnumber_"+j+"_"+id).value = split_info[1]; 
        break; 
       } else 
        current_count = current_count+1; 
       if (current_count == till) { 
        var x= addnew(id); 
        x =x+1; 
        $("#Inputfields"+id).find("#insertname_"+x+"_"+id).value = split_info[0]; 
        alert($("#Inputfields"+id).find("#insertname_"+x+"_"+id).value); 
        document.getElementById("insertname_"+x+"_"+id).text = split_info[0]; 
        //alert(document.getElementById("insertname_"+x+"_"+id).value); 
        //document.getElementById("insertnumber_"+x+"_"+id).value = split_info[1]; 
       } 
      } 
     } else { 
     } 
    } 
</script> 

<script> 
function addnew(n) { 
    //var id = $(this).attr("id"); 
    var div = $("#Inputfields"+n); 
    var howManyInputs = (div.children("input").length)/4; 
    alert(howManyInputs); 
    var val = $("div").data("addedCount"); 

    var a = '<input type="search" id="insertinstitute_'+(howManyInputs)+'_'+n+'" placeholder="Institute" class="span3">'; 
    var b = '<input type="search" id="insertname_'+(howManyInputs)+'_'+n+'" placeholder="name" class="span3">'; 
    var c = '<input type="search" name="" id="insertnumber_'+(howManyInputs)+'_'+n+'" placeholder="number" class="span3">'; 
    var d = '<input type="search" name="" id="insertarea_'+(howManyInputs)+'_'+n+'" placeholder="area" class="span3">'; 
    var fin = a+b+d+c; 
    $(fin).appendTo(div); 
    div.data("addedCount", div.data("addedCount") + 1); 
    return howManyInputs; 
} 
</script> 

ОБНОВЛЕНО: Спасибо всем. Я смог найти ошибку. Претендент был x =x+1;. Это должно было x

Answer 1

Проблема, вероятно, здесь:

document.getElementById("insertname_"+x+"_"+id).text 

Там нет text собственности в элементах. Есть textContent (не в IE8-), innerText (в IE) и innerHTML. Однако есть метод text в jQuery. Так что вы можете сделать:

document.getElementById("insertname_"+x+"_"+id).innerHTML = ... 

или

$("#insertname_"+x+"_"+id).text(...); 

Кроме того, эти линии:

$("#Inputfields"+id).find("#insertname_"+x+"_"+id).value = split_info[0]; 
alert($("#Inputfields"+id).find("#insertname_"+x+"_"+id).value); 

.value должны быть заменены .val(), потому что те объекты JQuery.

Answer 2

Я переработал много вашего кода по многим причинам. Сравните эти два.

function fillin(entire, name, id, key) { 
    if (entire.checked) { 
     var split_info = []; 
     split_info = name.split(":"); 
     var div = $("#Inputfields" + id); 
     var till = (div.children("input").length)/4; 
     var current_count = 0; 
     var j = 0; 
     for (j = 0; j < till; j++) { 
      var myj = j + "_" + id; 
      if ($("#insertname_" + myj).val() === "" && $("#insertnumber_" + myj).val() === "") { 
       $("#insertname_" + myj).val(split_info[0]); 
       $("#insertnumber_" + myj).val(split_info[1]); 
       break; 
      } else { 
       current_count = current_count + 1; 
      } 
      if (current_count === till) { 
       var x = addnew(id) + 1; 
       div.find("#insertname_" + x + "_" + id).val(split_info[0]); 
       alert(div.find("#insertname_" + x + "_" + id).val()); 
       $("#insertname_" + x + "_" + id).val(split_info[0]); 
      } 
     } 
    } 
} 

function addnew(n) { 
    var div = $("#Inputfields" + n); 
    var howManyInputs = (div.children("input").length)/4; 
    alert(howManyInputs); 
    var myi = (howManyInputs) + '_' + n + '"'; 
    var val = div.data("addedCount"); 

    var a = '<input type="search" id="insertinstitute_' + myi + ' placeholder="Institute" class="span3">'; 
    var b = '<input type="search" id="insertname_' + myi + ' placeholder="name" class="span3">'; 
    var c = '<input type="search" name="" id="insertnumber_' + myi + ' placeholder="number" class="span3">'; 
    var d = '<input type="search" name="" id="insertarea_' + myi + ' placeholder="area" class="span3">'; 
    var fin = a + b + d + c; 
    $(fin).appendTo(div); 
    div.data("addedCount", val + 1); 
    return howManyInputs; 
}