dynamically created elements by ajax wont work using delegated event

Question

i am a beginner in javascript/jquery. I want to use delegated event because i created a dynamic class and i want to get it's data-value on it.

Now i made like this:

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);
   });
})

i want to get the value of data-value that is in the <a> tag.

Answer 1

You need to do like below:-

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

It's because .caption is also added dynamically.