如何使用jQuery获取点击的影视列表链接中携带的资源ID？

• 列表渲染时所有a标签使用了固定重复的id ss，未将影视真实ID绑定到DOM元素上，导致点击时无法读取到对应ID
• 点击事件代码放在了jQuery的DOM就绪回调$(function(){})外部，存在绑定时机异常的风险

1. 修改列表渲染逻辑，绑定影视ID到自定义属性 #

修改循环拼接a标签的代码，给a标签新增data-movie-id自定义属性存储当前影视的movie.id，移除固定重复的id属性：

$.each(movies, function(i,movie){
  // 新增data-movie-id属性存储真实id，删除固定id="ss"
  $movies.append('<li class="list"><a href="'+ movie._links.self.href+'" data-movie-id="'+ movie.id +'">'+ movie.name +'</a></li>')
})

2. 修改点击事件的ID读取逻辑 #

点击时通过jQuery的data()方法读取绑定的自定义属性值即可获取到对应影视ID：

$('body').on('click','.list a',function(event){
  event.preventDefault();
  $('#showList').hide();
  $('#show').empty()
  // 读取绑定的影视ID
  let currentId = $(this).data('movie-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(); 
})

3. 调整代码结构（可选但建议） #

把整个点击事件的绑定代码放到$(function(){})内部，确保DOM加载完成后再执行绑定逻辑，避免异常。

$(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 class="list"><a href="'+ movie._links.self.href+'" data-movie-id="'+ movie.id +'">'+ movie.name +'</a></li>')
      })
    }
  })

  // 点击事件移到DOM就绪回调内部
  $('body').on('click','.list a',function(event){
    event.preventDefault();
    $('#showList').hide();
    $('#show').empty()
    let currentId = $(this).data('movie-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(); 
  })
})

内容的提问来源于stack exchange，提问作者Swayam Shah