How do I get the id present in the link using jQuery?-CodePudding

I am calling data from a movie API using jquery and it has an endpoint where I can call a particular show with an id. The home page displays the movies and clicking them should call another endpoint of the API. Below is my code:

$(function (){
   
    let $movies = $('#showList')
    
    $.ajax({
        method:'GET',
        url:'http://api.tvmaze.com/shows',
        success: function(movies){
            $('#show').hide()
            $('#showList').removeAttr('hidden');
            $.each(movies, function(i,movie){
                $movies.append('<li ><a id="ss" href="'  movie._links.self.href '">'  movie.name  '</a></li>')
            })
        }

        })
    
    })

    $('body').on('click','.list a',function(event){
        
    
       event.preventDefault();
        $('#showList').hide();
        $('#show').empty()
        
        let currentId = event.target.id;
        console.log(currentId)
        $.ajax({
            method:'GET',
            url:'http://api.tvmaze.com/shows/' currentId,
            success: function(movies){
                $('#show').append('<h1>'  movies.name  '</h1>')
                
                
               
            }
        }) 
    
        $('#show').show();

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV Shows</title>
</head>
<body>
    <h1>TV Shows</h1>
    <div id="show" hidden></div>
    <ul id="showList" hidden></ul>
    <form id="searchForm">
        <input type="text" id="search_term">
        <label for="text">Search</label>
        <button>Submit</button>
    
    </form>
    <a id="homelink" href="/" hidden>Back to All Shows</a>
    <footer>Swayam Shah, 10471353</footer>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
    <script src="/public/js/index.js"></script>
</body>
</html>

How do I get this id when I click on the movies link? The console.log shows empty.

CodePudding user response：

you haven't mentioned id attribute in your anchor tag.

     $movies.append('<li class="list"><a href="'  movie._links.self.href '">'  movie.name  '</a></li>')

CodePudding user response：

Using "this" works for me.

$("a").click(function() {
    console.log($(this).attr("id"));
});