Как повесить клик на динамические объекты

Question

У меня есть ajax запрос, который динамически выводит объекты. Мне нужно повесить клик на каждый объект, который выдает его данные.

Пример данных:

Мне нужно добавить к каждой кнопке "в корзину"(#be) по клику, который будет выводить данные в консоль отдельного объекта(пример того, что я хочу, когда кликну по какой-то кнопке "в корзину"):

Пример js:

$(function(){
    let product = {
        id:Number,
        productId:String,
        name:String,
        image:[],
        ingredients:Number,
        price:Number,
        category:String,
    }
    $.ajax({
        url: "https://localhost:7085/api/Product",
        type: "get",
        success: function (response) {

            product = response;
            let productEl = $("#productHome");
            for (let i = 0; i < 3; i++)
            {
                productEl.append(get_card(product[i]));
                
          
            }
                console.log(product)
       
    
        }

    });
    function get_card(product) {
        let cardText = `
 <div class="col-lg-4 mb-5">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="data:image/jpeg;base64,${product.image}" alt="">
                        </div>
                        <div class="product-name text-center mt-2" id="name"   >
                            ${product.name}
                        </div>
                        <div class="button-pizza-size mt-2 mb-2">
                            <button>Стандарт</button>
                            <button>Средняя</button>
                            <button>Большая</button>
                        </div>
                        <div class="product-ingredients">
                            <p class="text-black mt-2">${product.ingredients}
                            </p>
                        </div>
                        <div class="row card-button-bottom">
                            <div class="col">
                                <div class="product-price">
                                    <p class="text-black mt-2 ">
                                        ${product.price} 
                                    </p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="button-product-add text-end">
                                    <button id="be">В корзину</button>
                                </div>
                            </div>
                        </div>
                    </div>

    `;
        return $(cardText);
    }


    
});

Как это можно сделать?

UPD:

Я пытался добавить обработчик в цикле, но это не работает:

  for (let i = 0; i < 3; i++)
        {
            productEl.append(get_card(product[i]));
            productEl[i].addEventListener('click', function (){
                console.log(product[i])
            });
        }

Этот вариант просто выводит все продукты, а не именно тот, который был выбран:

   for (let i = 0; i < 3; i++)
            {
                productEl.append(get_card(product[i]));
                $('#be').on('click',function (){
                    console.log(product[i])
                })
            }

Answer 1

У jquery есть возможность вешать события на динамические элементы, вот так:

$(document).on("click","#some-element",function(){
    console.log(this);
});

Вам нужно только в добавляемых блоках сделать идентификатор, например:

<div class="col-lg-4 mb-5" id="product-${product.id}">

И тогда ваш обработчик будет выглядеть таким образом:

$(document).on("click","#product-"+product[i].id,function(){
    console.log(this);
});

БЛОГ НА HUSL

Как повесить клик на динамические объекты

Ответы (1 шт):