Как обратиться к динамически созданному в jQuery

Question

Имеется следующий шаблонный PHP код, в который динамически подставляются различные данные

<div <?php echo $id_product ?> class="product_example text-center p-2">
<img alt="food1" class="img-fluid" src=<?php echo $image_product; ?> >
<div>
    <h4><?php echo $name_product; ?></h4>
    <h5>Цена: <?php echo $price_product; ?> грн</h5> 
    <button <?php echo $id_product ?> type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#modalwindow" onClick="modal_param(this)">Купить</button>
</div>

По нажатию на button как обратиться через div#id (id меняется) к значению src у img и к значению заключенный в тег

Если бы id не менялся это выглядело бы как-то так:

function modal_param(obj){
var idd=obj.id;
var imgparam= $("div#idd>img").attr("src");
console.log(imgparam);}

Answer 1

Уберите эти инлайн обработчики из кода (onclick) (вообще в коде не надо смешивать хтмл с пхп, ни js с хтмл, пишите раздельно, это все упростит ).
добавьте кнопке и картинке классы, а-ля, .buy и .product-image, и обрабатывайте событие соответственно:

$(".buy").click(function(){
    let src = $(this).closest(".product-example")
                     .find("img.product-image")
                     .attr('src');
    console.log(src);
});

если блоки на страницу добавляются динамически, то соответственно используйте привязку обработчиков через .on('click', '.buy', ...)

БЛОГ НА HUSL

Как обратиться к динамически созданному в jQuery

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