dynamisch erstellte Elemente von Ajax nicht arbeiten mit delegierten Ereignis

Question

Ich bin ein Anfänger in Javascript/Jquery. Ich möchte delegiertes Ereignis verwenden, weil ich eine dynamische Klasse erstellt habe und ich möchte seinen Datenwert darauf beziehen. Jetzt

ich so gemacht:

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 den Wert der Daten-Wert erhalten möchten, die in der <a>-Tag ist.

Answer 1

Sie müssen wie unten tun: -

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

Es ist, weil .caption auch dynamisch hinzugefügt wird.