동적 ID 선택기가 호출되지 않거나 인스턴스화되지 않습니다.

Question

새 코드를 추가 할 때 <tr id="select_row">이 태그는 id가 1 인 select_row1, select_row2, select_row3만큼 증가합니다.

행은 내가 체크 박스를 클릭하려고 증가되었습니다하지만 아래 트리거뿐만 아니라 ID가에서 #single_price0 및 #total_price0이

if (((meat_length == 1)&&(vege_length == 2)) || ((meat_length == 1)&&(vege_length == 1))) {};

var list = $('#add_order_table'); 
var initial = 0; 

    list.click(function(){ 


    html = '<tr id="select-row'+initial+'">'; 
     html += '<td class="col-md-7">'; 
     //meat 
     html += '<div class="col-md-6">'; 
     html += '<div class="checkbox"><label><input type="checkbox" name="meat'+initial+'[]" class="meat"> Black Pepper Fried Chicken</label></div>'; 
     html += '<div class="checkbox"><label><input type="checkbox" name="meat'+initial+'[]" class="meat"> Pineapple Pork</label></div>'; 
     html += '<div class="checkbox"><label><input type="checkbox" name="meat'+initial+'[]" class="meat"> Bitter Gourd with Dash Fish</label></div>'; 
     html += '</div>'; 

     //vege 
     html += '<div class="col-md-6">'; 
     html += '<div class="checkbox"><label><input type="checkbox" name="vege'+initial+'[]" class="vege"> Garlic Bayam</label></div>'; 
     html += '<div class="checkbox"><label><input type="checkbox" name="vege'+initial+'[]" class="vege"> Oyster Young Pakchoy</label></div>'; 
     html += '</div>'; 

     html += '</td>'; 
     html += '<td class="col-md-1 text-center"><b><p>RM <span id="single_price'+initial+'">0.00</span></p><b></td>'; 
     html += '<td class="col-md-2"><p><input id="qty'+initial+'"type="text" value="" name="demo" class="text-center qty_spinner"></p></td>'; 
     html += '<td class="col-md-1 text-center"><b><p>RM <span id="total_price'+initial+'">0.00</span></p><b></td>';   
     html += '<td class="col-md-1 text-center"><p><button type="button" class="btn btn-danger" onclick="$(\'#select-row' + initial + '\').remove();">'; 
      html += '<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>'; 
     html += '</button></p></td>'; 
    html += '</tr>';   

    $('#order_table tbody').append(html); 

    $('.qty_spinner').TouchSpin({ 
     initval: 1, 
     min:1, 
     max:50, 
     buttondown_class: 'btn btn-danger', 
     buttonup_class: 'btn btn-primary', 
    }); 

    var row = $("#select-row"+initial); 
    row.on('change',function(e){ 

     var meat_length = $('input[class="meat"]:checked').length; 
     var vege_length = $('input[class="vege"]:checked').length; 

     if (meat_length == 0 || vege_length == 0) { 
      $("#single_price"+initial).text("0.00"); 
      $("#total_price"+initial).text("0.00"); 
     }; 

     // 5.50 meal function 
     if (((meat_length == 1)&&(vege_length == 2)) || ((meat_length == 1)&&(vege_length == 1))) { 
      // set single price without parsing 
      $("#single_price"+initial).text("5.50"); 
      //get single price with parsing 
      var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2); 
      // get quantity value 
      var qty1 = parseInt($("#single_qty"+initial).val()); 
      //single price multiply 
      var total = parseFloat(single1*qty1).toFixed(2); 
      $("#total_price"+initial).text(total);   
     }; 

     // 6.00 meal function 
     if (((meat_length == 2)&&(vege_length == 1)) || (meat_length == 2)) { 
      // set single price without parsing 
      $("#single_price"+initial).text("6.00"); 
      //get single price with parsing 
      var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2); 
      // get quantity value 
      var qty1 = parseInt($("#single_qty"+initial).val()); 
      //single price multiply 
      var total = parseFloat(single1*qty1).toFixed(2); 
      $("#total_price"+initial).text(total);   
     }; 

    }); 


    initial++; 
}); 

Answer 1

랩 초기 여기서 값을 변경하지 않는 한 함수이므로 변경 기능 내에서 증분을 유지합니다.

(function(initial) { 
    var row = $("#select-row"+initial); 
    row.on('change',function(e){ 

    var meat_length = $('input[class="meat"]:checked').length; 
    var vege_length = $('input[class="vege"]:checked').length; 

    if (meat_length == 0 || vege_length == 0) { 
     $("#single_price"+initial).text("0.00"); 
     $("#total_price"+initial).text("0.00"); 
    }; 

    // 5.50 meal function 
    if (((meat_length == 1)&&(vege_length == 2)) || ((meat_length == 1)&&(vege_length == 1))) { 
     // set single price without parsing 
     $("#single_price"+initial).text("5.50"); 
     //get single price with parsing 
     var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2); 
     // get quantity value 
     var qty1 = parseInt($("#single_qty"+initial).val()); 
     //single price multiply 
     var total = parseFloat(single1*qty1).toFixed(2); 
     $("#total_price"+initial).text(total);   
    }; 

    // 6.00 meal function 
    if (((meat_length == 2)&&(vege_length == 1)) || (meat_length == 2)) { 
     // set single price without parsing 
     $("#single_price"+initial).text("6.00"); 
     //get single price with parsing 
     var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2); 
     // get quantity value 
     var qty1 = parseInt($("#single_qty"+initial).val()); 
     //single price multiply 
     var total = parseFloat(single1*qty1).toFixed(2); 
     $("#total_price"+initial).text(total);   
    }; 

    }); 
})(initial);