Калькулятор на jQuery с загрузкой данных через json?

Question

[maximusDreddoff]

Есть код калькулятора, который берет данные из массива PHP(посредством JSON). Обращение к массиву осуществляется через id инпутов. В Админке есть таблица соответствия активных айдишников определенной цене. По клику на "плюс" с классом ".click" добавляю новую строку инпутов. Как сделать так, чтобы к добавленной строке инпутов применялись те же правила, что и для остальных импутов(из админки подгружалась нужная цена)?
Сайт с кодом калькулятора: http://mktester4.tk/цены/ ("подсчитать цену")
Код калькулятора:

$(".click").hide();
  $(".zone-item input:checkbox").click(function () {
var zoneItem = $(this).closest(".zone-item");
zoneItem.toggleClass("activated");
zoneItem.children(".js-form-controls").slideToggle("fast");
$(".click").show();

if (zoneItem.hasClass("activated")) {
    var zoneItemId = $(this).closest(".zone-item").attr("id");
    $("#" + zoneItemId + " .age-selector").change(function () {
        var ageItem = $("option:selected", this).attr("value");
        $("#" + zoneItemId + " .age-selector-value").each(function(){
            $(this).html(ageItem);
        });
    });
    $("#" + zoneItemId + " .time-selector").change(function () {
        var timeItem = $("option:selected", this).attr("value");
        $("#" + zoneItemId + " .time-selector-value").each(function(){
            $(this).html(timeItem);
        });
    });
    $("#" + zoneItemId + " .number-selector").change(function () {
        var peopleCount = $(this).attr("value");
        $("#" + zoneItemId + " .people-selector-value").each(function(){
            $(this).html(peopleCount);
        });
    });
    //createNewRow
    $(this).closest(".zone-item").delegate( ".click", "click", function() {
        var additionalInputs = $("#" + zoneItemId + " .js-form-controls").html();
        $(this).closest(".zone-item").after( "<div class='js-form-controls'>"+ additionalInputs +"</div>" );
    });


    $("#" + zoneItemId + " .form-control").change(function() {
        $("span.age-selector-value, span.time-selector-value, span.price-for-zone").css("display", "none");
        var finalAge = $("#" + zoneItemId + " .age-selector-value") .html();
        var finalTime = $("#" + zoneItemId + " .time-selector-value").html();
        var finalPeopleCount = $("#" + zoneItemId + " .people-selector-value").html();
        var zonePrice= $("#" + zoneItemId + " .price-for-zone");

        zonePrice.html(window.prices[zoneItemId][finalTime][finalAge]);

        var sum=0;
        var multipliedPrice = $("#" + zoneItemId + " .price-for-zone").html() * finalPeopleCount;
        $("#" + zoneItemId + " .multiplied-price-for-zone").html(multipliedPrice);

        $(".multiplied-price-for-zone").each(function(){
            sum += Number($(this).html());
        });
        $(".js-final-price").html(sum);
    });
}

else {
    var zoneItemId = $(this).closest(".zone-item").attr("id");
    var finalPeopleCount = $(".people-selector-value").html();
    $("#" + zoneItemId + " .price-for-zone").html(0);
    $("#" + zoneItemId + " .people-selector-value").html(1);
    $("#" + zoneItemId + " .number-selector").val(1);
    $("#" + zoneItemId + " select").val('default');
    var sum=0;
    $(".price-for-zone").each(function(){
        sum += Number($(this).html()*finalPeopleCount);
    });
    $(".js-final-price").html(sum);
    }
   });

Answer 1

[Алексей Рытиков]

Вы вешаете обработчик события change на select, находящийся внутри элемента с классом zone-item, а новый div с классом js-form-controls (содержащим новые input'ы) добавляете не внутрь .zone-item, а после него.


Но если отвечать на вырезанный из контекста вопрос

Как сделать так, чтобы к добавленной строке инпутов применялись те же правила

то вам следует использовать .on().

P.S. Применять id, состоящие только из цифры 0, 1, 2, … – не лучшая практика.