jQuery мы можем зацикливать функцию?

Question

Почему не работает этот тип петли? если эта функция не зациклирована, она работает отлично. Мне нужен этот код, потому что у меня есть динамический прилагаемого DIV

$(document).ready(function(){ 
    for (var count = 1; count < 10; count++) { 
      $('#keranjang').on('keyup', '#tinggikm'+count+', #lebarkm'+count, function(){ 
      <!-- Ambil nilai !--> 
      var tinggi=parseInt($('#tinggikm'+count).val()); 
      var lebar=parseInt($('#lebarkm'+count).val()); 
      var harga=(tinggi * lebar) * 1000; 

      $('#hargakm'+count).val(format1(harga, "Rp.")); 
      }); 
    } 
}); 

это мой HTML с добавленного JQuery

countkm = 1; 
countj = 1; 
countp = 1; 
$("#somebutton").click(function() { 
var tipe = $("#selecttipe option:selected").val(); 
    $("#keranjang").append(
       '<div class="col-md-4" style="border:1px solid #0d8b2a; border-radius:10px; width:31%; margin:10px">'+ 
        '<p style="font-size:16px; letter-spacing:1px; font-weight:700; text-transform:uppercase; text-decoration:underline; margin-bottom:15px">'+ 
        (tipe == "km" ? 'Kaca Mati ' : tipe == "j" ? 'Jendela ' : 'Pintu ')+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+ 
        '</p>'+ 
        '<div class="form-group">'+ 
         '<label class="control-label">TINGGI (cm)</label>'+ 
         '<input type="text" class="form-control" value="'+ 
         (tipe == "Pintu" ? '200' : '100')+ 
         '" id="tinggi'+tipe+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+'">'+ 
         '<label class="control-label">LEBAR (cm)</label>'+ 
         '<input type="text" class="form-control" value="'+ 
         '100'+ 
         '" id="lebar'+tipe+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+'">'+ 
         '<label class="control-label">HARGA</label>'+ 
         '<input type="text" class="form-control" disabled value="'+ 
         '0'+ 
         '" id="harga'+tipe+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+'">'+ 
        '</div>'+ 
       '</div>' 
       ); 
       if (tipe == "km"){countkm++;}else if(tipe =="j"){countj++;}else{countp++;}; 

}); 

и это моя кнопкой HTML для создания Дива

<select style="float:left; width:50%" class="form-control select2me" id="selecttipe" required> 
          <option value="km">Kaca Mati</option> 
          <option value="j">Jendela</option> 
          <option value="p">Pintu</option> 
         </select> 
         <button id="somebutton" style="float:left; margin-left:10px" type="submit" class="btn"> Tambah</button> 

Answer 1

Это нехороший подход к циклу для простого подключения события. Вы можете сделать это лучше и проще, используя атрибуты данных. Я предполагаю, что вам нужно прикрепить событие keyup к динамически генерируемым полям ввода.

Вот что вы можете сделать;

1. Назначить уникальный id каждому элементу в вас div по времени создания HTML на ваш взгляд, например id="tinggikm#{i}", который будет оказывать как id="tinggikm1", id="tinggikm2".
2. Затем добавьте общий класс i.e "my_keyup_input" в поле ввода, на которое вы хотите вызвать метод keyup. ВАЖНЫЙ! добавьте атрибут data для уникального счета data-count="#{i}" в зависимости от вашего языка.

3. Затем, наконец, в jQuery вы можете прослушивать событие, используя селектор классов, что-то вроде этого;

   $(document).ready(function(){ 
   
   $('.my_keyup_input').on('keyup', function(){ 
   
       // Lets get the count to uniquely identify our related div elements 
       var count = $(this).data('count'); 
   
       var tinggi=parseInt($('#tinggikm'+count).val()); 
       var lebar=parseInt($('#lebarkm'+count).val()); 
       var harga=(tinggi * lebar) * 1000; 
   
       $('#hargakm'+count).val(format1(harga, "Rp.")); 
   }); 
   }); 
   

Answer 2

насчет использование id начинается с селектора, а не для циклирования:

$(document).ready(function() { 
    $('#keranjang').on('keyup', '[id^=tinggikm], [id^=lebarkm]', function() { 
    <!-- Ambil nilai !--> 
    var tinggi = parseInt($('#tinggikm' + count).val()); 
    var lebar = parseInt($('#lebarkm' + count).val()); 
    var harga = (tinggi * lebar) * 1000; 
    $('#hargakm' + count).val(format1(harga, "Rp.")); 
    }); 
}); 

Answer 3

основы созданного HTML, опция является захват всех keyups и использовать содержащий .form-group, чтобы найти соответствующие входы и значение. Таким образом, не нужно ссылаться на конкретные созданные идентификаторы. Есть более эффективные способы, путем изменения пути создания HTML, но ниже, должны работать с текущей функциональностью:

$('#keranjang').on('keyup', function(e){ //bind on keyup for entire container (no loop) 
    var inp = $(e.target), //the input for which the keyup was captured 
     grp=inp.closest('.form-group') //the group the input is in 
     inputs = grp.find('.form-control'), //all inputs 
     lbl = inputs.filter(':disabled'); //the disabled input is the total (if possible: using specific classes for the inputs and labels would be better) 
    lbl.val(inputs.not(lbl).toArray().reduce(function(t,i){return t * parseInt(i.value);}, 1000)); //use reduce on the other inputs, to multiply them with each other (with a base of 1000) 
}); 

Fiddle