Так ты тег
<а></a>
добавляешь и потому юзаешь .val(), что должно было произойти ?
У тега
<a></a>
нет value
$( ".el" ).click(function() - используется для элементов, которые были загружены и видны для jq вовремя загрузки страницы
а для элементов , которые были добавлены после нужно юзать так: $( "body" ).on('click', '.test', function() (не обязательно от body, можно от родителя в твоем случае .directory)
https://codepen.io/5h4dy_s/pen/RwaeMOd
$( "body" ).on('click', '.test', function() {
var id = $(this).attr('id');
alert(id);
});
$( ".run" ).click(function() {
$(".directory").append('<a class="test" id="my_id" href="#">text</a>');
});