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

我想要得到的數據值，在<a>變量的值。

Answer 1

你需要做的象下面這樣： -

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

這是因爲.caption也是動態添加。