javascript - li action not working when add element from ajax

I have this div

    
        Foods:
    
    

        


            roma
        
    

and this jquery:

$(".foodsSection li").click(function(){
        $(".addressesSection").css("display","block");

    });

when I press on roma the jquery is working good, but when i press on any li that comes from database using jquery, the jquery is not working, this is the jquery which take the data form database and but it in li elements

$(document).ready(function(){
    $(".RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        $(".foodsSection").css("display", "block");

        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i                lis +="
"+""+data[i]+" "+data[i+1]+"
";
            }
            lis+="";
            foodDive.html(lis);    

        });
    });
    $(".foodsSection li").click(function(){
        $(".addressesSection").css("display","block");
    });
});

Answer

You have to use .on() instead of .click() because the click method does not work on DOM which has been generated.

$(".foodsSection li").on("click", 'li' ,function(){
    $(".addressesSection").css("display","block");
});