Javascript 使用委派事件，ajax动态创建的元素不起作用

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

功能getProducts（类别id）{ $（“#产品列表”）.empty（）； $.ajax({ url:“{url（'product'）}}/”+类别id， 键入：“获取”， 数据类型：“JSON”， 成功：功能（数据）{ 如果（数据长度>0）{

---

对于（i=0；i您需要执行以下操作：-

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

---

这是因为

.caption

也是动态添加的。

谢谢，先生，很好。它很有效。感谢您对初学者的理解和帮助