ajax 动态创建的元素无法使用委托事件

Question

我是 javascript/jquery 的初学者。我想使用委托事件，因为我创建了一个动态 class 并且我想获取它的数据值。

现在我是这样制作的：

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

我想获取 <a> 标签中数据值的值。

Answer 1

您需要执行以下操作：-

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

因为.caption也是动态添加的

ajax 动态创建的元素无法使用委托事件

dynamically created elements by ajax wont work using delegated event

javascript

jquery

ajax

delegated-properties