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

Мне нужно сделать что-то подобное, чтобы динамически создавать билеты, рассчитывать цены и показывать результаты, и так далее, каждый раз, когда я добавляю больше, проблема в том, что когда я добавляю еще один, не вычисляются данные о ценах, я ценю вашу помощь, спасибо!

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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
84
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 - надеюсь, что это поможет!

@programerNoob пожалуйста, понятно - только что обновленный ответ. Вам это помогает?

Dacre Denny 19.09.2018 02:10

Другие вопросы по теме