Рассчитать результаты динамически добавленных форм

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 с вашей строкой HTML, рассмотрите более ориентированный на jQuery подход с использованием jQuery для привязки обработчиков событий, выполнения запросов DOM и т. Д.

Так, например, вы можете сделать следующее:

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

            }

Для полной рабочей версии см. Этот jsFiddle - надеюсь, это поможет!