动态ID选择器没有被调用或实例化

Question

我正在创建一个jQuery的功能，当我添加新的<tr id="select_row">这个ID标记将增加一个例如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);