javascript - 计算动态添加表格的结果

我不得不做一些类似的事情来动态创建机票，计算价格和显示结果等等，每次我添加更多，问题是，当我添加另一个不计算价格数据，我感谢你的帮助谢谢！

var count = 1;
$("#add").click(function() {
var html = "<div id='ticket" + count + "'><div class='add-new-ticket' id='box-ticket'><div class='ticket-box'><div class='row'><div class='col-md-3 col-sm-3'><input type='text' class='form-control text-boxes monto' placeholder='Amount' id='cantidad' onkeyup='calcularPrecio();'><span class='bar'></span></div><div class='col-md-3 col-sm-3'><input type='text' class='form-control text-boxes monto precio' placeholder='Price' id='precio' onkeyup='calcularPrecio();'><span class='bar'></span></div><div class='col-md-3 col-sm-3 icon-tk'><a href='javascript: void(0)'><span class='glyphicon glyphicon-trash icon remove-ticket' style='margin:5px; color: black;'></span></a></div></div></div><div class='ticket-footer text'><div class='row cont-foot-tk'><div class='col-md-2 col-sm-2'><p>Price: <span class='dollar' style='color: #d9534f;'>$ </span><span style='color: #d9534f;' id='Costo'> 0</span></p></div><div class='col-md-3 col-sm-3 com-cliente'><p>Comision:<span class='dollar' style='color: #d9534f;'>$ </span><span style='color: #d9534f;' id='Comision'> 0</span></p></div><div class='col-md-2 col-sm-2 recibir-cliente'><p>You recibe: <span class='dollar' style='color: #d9534f;'>$ </span><span style='color: #d9534f;' id='Recibir'> 0</span></p></div><div class='col-md-3 col-sm-3 total-cliente'><p class='back-text'> To pay: <span class='dollar' style='color: white;'>$ </span><span id='totalPagar'> 0</span></p></div></div></div></div></div></div>";
$("#addresses").append(html);

count++;
});

function foo(which) {
$("#div" + which).remove();
}


function calcularPrecio() {
var valor = "";
var precio = document.getElementById("precio").value;
var cantidad = document.getElementById("cantidad").value;
var total = 1;
var comision = 1;
var totalPagar = 1;
var change = false;



$(".monto").each(function() {
    if (!isNaN(parseFloat($(this).val()))) {
        change = true;
        total = precio * cantidad;
        comision = precio / 10;
        valor = precio;
        totalPagar = parseFloat(precio) + comision;

    }
});
total = (change) ? total : 0;
comision = (change) ? comision : 0;
totalPagar = (change) ? totalPagar : 0;

document.getElementById('Costo').innerHTML = precio;
document.getElementById('Comision').innerHTML = comision;
document.getElementById('Recibir').innerHTML = total;

document.getElementById('totalPagar').innerHTML = totalPagar;

}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p class="aditional-text add-tk-pay" for=""><b>Tipo de tiquetes</b>
    <a class="btn btn-primary" href="javascript: void(0)" type="button" style="background-color: #ff1289; border-color:#ff1289;" id="add"><span></span>Add more</a>
</p>

<div id="addresses">
</div>

最佳答案

与其将键控事件绑定混合到HTML字符串中，不如考虑使用jQuery绑定事件处理程序、执行DOM查询等以jQuery为中心的方法。
例如，您可以执行以下操作：

 var count = 1;
            $("#add").click(function() {

        // This html string is different from your original
        var html = "<div id='ticket" + count + "'><div class='add-new-ticket' id='box-ticket'><div class='ticket-box'><div class='row'><div class='col-md-3 col-sm-3'><input type='text' class='form-control text-boxes monto cantidad' placeholder='Amount' id='cantidad'><span class='bar'></span></div><div class='col-md-3 col-sm-3'><input type='text' class='form-control text-boxes monto precio' placeholder='Price' id='precio'><span class='bar'></span></div><div class='col-md-3 col-sm-3 icon-tk'><a href='javascript: void(0)'><span class='glyphicon glyphicon-trash icon remove-ticket' style='margin:5px; color: black;'></span></a></div></div></div><div class='ticket-footer text'><div class='row cont-foot-tk'><div class='col-md-2 col-sm-2'><p>Price: <span class='dollar' style='color: #d9534f;'>$ </span><span style='color: #d9534f;' class='Costo' id='Costo'> 0</span></p></div><div class='col-md-3 col-sm-3 com-cliente'><p>Comision:<span class='dollar' style='color: #d9534f;'>$ </span><span style='color: #d9534f;' class='Comision' id='Comision'> 0</span></p></div><div class='col-md-2 col-sm-2 recibir-cliente'><p>You recibe: <span class='dollar' style='color: #d9534f;'>$ </span><span style='color: #d9534f;' class='Recibir' id='Recibir'> 0</span></p></div><div class='col-md-3 col-sm-3 total-cliente'><p class='back-text'> To pay: <span class='dollar' style='color: white;'>$ </span><span class='totalPagar' id='totalPagar'> 0</span></p></div></div></div></div></div></div>";

        var form = $(html);

        // Create an instance of calcularPrecio with `this` being the form object
        var formCalcularPrecio = calcularPrecio.bind(form);

        $("#addresses").append(form);

        $('.cantidad', form).keyup(formCalcularPrecio); // Add keyup handler like so
        $('.precio', form).keyup(formCalcularPrecio); // Add keyup handler like so

        count++;
    });

然后更新你的calcularPercio方法如下：

function calcularPrecio() {
                var valor = "";

                                // Use jquery to get inputs for this form
                var precio = parseFloat($(".precio", this).val());
                var cantidad = parseFloat($(".cantidad", this).val());
                var total = 1;
                var comision = 1;
                var totalPagar = 1;
                var change = false;


                $(".monto", this).each(function() {
                    if (!isNaN(parseFloat($(this).val()))) {
                        change = true;
                        total = precio * cantidad;
                        comision = precio / 10;
                        valor = precio;
                        totalPagar = parseFloat(precio) + comision;

                    }
                });
                total = (change) ? total : 0;
                comision = (change) ? comision : 0;
                totalPagar = (change) ? totalPagar : 0;

                                // Use jquery to set html for this form
                $('.Costo', this).html(precio);
                $('.Comision', this).html(comision);
                $('.Recibir', this).html(total);
                $('.totalPagar', this).html(totalPagar);

            }

对于一个完整的工作版本，see this jsFiddle-希望有帮助！

关于javascript - 计算动态添加表格的结果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52395936/