jquery ajax call on anchor tag click + mvc 4

Question

I have a view into which I am rendering the folders exists in the given path.

we hit the controller action with the root directory as parameter and the action will return the contents in root (folder names, file names , images names etc.,). These details are rendered into a view with folders as anchors.

Here the requirement is, on click on any folder in the view, we have to do an ajax request and fetch the contents of that folder and show it. Here the problem is, to handle click event in jquery, I dont have ids to anchors. Even if I render ids to anchors, they are not going to be same always due to changing number of folders.

So how can I handle these ajax calls in jquery.

Is it ever possible Or do we need to make a normal request only click of an anchor?

Please advise..

EDIT: my view

@model IVM
@{

ImgFolder imgFolder = Model.ViewModel as ImgFolder;
string dirName, fileName;

}

@{Uri uri = Request.Url;}

@*Show the current directory name using page URL. *@
<h2>@Server.UrlDecode(uri.Segments.Last())</h2>


<ul>
    @*Listing the directories *@
    @foreach (var folder in imgFolder.Folders)
    {
        dirName = new DirectoryInfo(folder).Name;


        <li>

            <a class="imagefolder" title="@dirName">@dirName</a>


        </li>


    }

    @* Listing files *@
    @foreach (var file in imgFolder.Files)
    {
        fileName = Path.GetFileName(file);
        <li>
            <a href="@(uri.AbsolutePath + fileName)" title="@fileName" target="_blank">@fileName</a>
        </li>
    }
</ul>

Answer 1

add a class on root ul:

<ul class="directories">
    @*Listing the directories *@

and write jquery event like this:

$(".directories a").click(function(e){

    e.preventDefault();

    var tagId = this.id // clicked anchor tag id

    var url = $(this).prop("href");

   // send ajax call here

   $.ajax ({


   });


});