动态 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

将 initial 包装在一个函数中，因此它保留了 change 函数中的增量：

(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);

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

dynamic id selector not being called or instantiate

javascript

jquery

jquery-selectors