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

Question

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

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>

Answer 1

与其将 keyup 事件绑定(bind)混合到您的 HTML 字符串中，不如考虑使用 jQuery 绑定(bind)事件处理程序、执行 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 - 希望对您有所帮助!