Inside fancybox3 the click() event is not fired. How to fix?

Question

JavaScript

Good day to all! I want to ask for help.

My task is to create a mini shopping cart using fancybox3 and display items there with JSON.

There are also counters that should be triggered by click()an event and perform certain actions, but click()it does not work

$('.control__counter .counter__plus1').on('click', function () {
    let counterValue = parseFloat($(this).siblings('input').val()) + 1;
    $(this).siblings('input').val(counterValue);
    $(this).parentsUntil('.minicart-product').addClass('changed-price');
    let price = $(".changed-price .order-box__price").text().replace(/[^\d;]/g, '');
    console.log(price);

});


$.getJSON('goods.json', function (data) {

    $.each(data, function (key, val) {
        typeof (val);



        $('.minicart_scrolled-container').append('<div class="minicart-product  ' + val.id + ' product-of-cart">' +
            '<img src="' + val.imgsrc + '" alt="">' +
            '<div class="product-container">' +
            '<div class="product-container_header">' +
            '<h1>' + val.name + '</h1>' +
            '<span class="discount">' + val.discount + ' грн</span>' +
            '<h5 class="order-box__price">' + val.price + '</h5>' +
            '</div>' +
            '<div class="product-container_footer">' +
            '<div class="product-container_info">' +
            '<p>Цвет: ' + val.color + '</p>' +
            '<p>Размер</p>' +
            '<div class="product-container_control">' +
            '             <input disabled class="control__size-select" value="' + val.sizename + '">' +
            '<div class="control__counter">' +
            '<span class="counter__minus1"> </span>' +
            '<input type="text" value="1" class="counter">' +
            '<span class="counter__plus1"> </span>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div class="product-container_price">' +
            // '<span class="discount-end">'+ val.discount +' грн</span>' +

            '<h5 class="order-box__end-price">' + val.price + '<p class="info-modal" tabindex="0"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia molestiae fugit expedita, corrupti facere veritatis non! </span></p></h5>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>');
        if (val.discount == 0) {
            $('.discount').remove();
            $('.discount-end').remove();
        }

    });

});

Answer 1

Try it

$(document).on('click',  '.control__counter .counter__plus1', function () {