Динамически созданные элементы с помощью ajax не будут работать с использованием делегированного события

Question

Я новичок в JavaScript/ JQuery. Я хочу использовать делегированное событие, потому что я создал динамический класс и хочу получить в нем значение данных.

Теперь я сделал так:

function getProducts(category_id) {
    $("#product-list").empty();
    $.ajax({
        url:"{{ url('product') }}/" +category_id,        
        type:"GET",
        dataType: "JSON",        
            success: function(data) {
                if(data.length>0) {
                    for(i=0;i<data.length;i++) {                        
                        $('#product-list').append('<div class="col-md-3 col-sm-3 hero-feature">'+'<div class="thumbnail">'+'<img src="{{ url('image_files/') }}/'+ data[i]['featured_img'] +'" alt="">'+'<div class="caption">'+'<h4><a href="#" data-value="'+data[i]['product_id']+'" class="product-target">'+data[i]['product_name']+'</a></h4>');
                    }                    
                } else {
                        $('#product-list').append('<h3>Nothing to display</h3>')
                }
            }
    });
}

$(document).ready(function(){
   $('.caption').on('click','.product-target',function() {
    var value = $(this).data("value");
    alert(value);
   });
})

я хочу получить значение data-value, которое находится в <a> тег.

Answer 1

Вам нужно сделать, как показано ниже:

$('#product-list').on('click','.caption .product-target',function() {
  var value = $(this).data("value");
  alert(value);
});

Это потому что .caption также добавляется динамически.