click event on sub appended element

Question

I am trying to run click event on nested appended elements.

       $(document).ready(function () {
        var year;
        var month;
        var day;


        $(".table-list").one("click", function (e) {
            year = $(this).data("year")
            var this_li = $(this)
            $.get( "get_months/"+year, function( data ) {
              $.each(data, function (key, val) {
                  $(this_li).append('<ul class="sub"><li class="month-list" data-month='+val["_id"]+'>'+val["_id"]+'-'+year+'</li></ul>')
              });
            });
        });

        $(".table-list").delegate(".month-list", "click", function(){
            if($(this).data("clicked"))
            {
                return false;
            }
            month = $(this).data("month")
            var this_li = $(this)
            $.get( "get_days/"+year+"/"+month, function( data ) {
             $.each(data, function (key, val) {
                  $(this_li).append('<ul class="sub"><li class="source_list" data-day='+val["_id"]+'>'+val["_id"]+'-'+month+'-'+year+'</li></ul>')
              });

            });
            $(this).data("clicked", true);


        });

        $(document).on("click", ".source_list" , function() {
        alert("bla")
         });

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But click event on "source_list" not working. How can I access this element with jquery? I also tried delegate but it doesn't work too.