jQuery中点击动态加载影视列表时hide/show无响应如何修复？

你的代码存在以下几处语法错误和逻辑问题：

• 事件绑定语法错误：$('#showList').on('click'),function(event) 括号位置错误，on方法的回调函数应该作为第二个参数放在on的括号内，同时没有指定事件委托的目标元素，点击事件需要绑定到动态生成的<a>标签上才能正确捕获点击行为。
• 未存储影视ID：渲染影视列表时，没有给<a>标签添加data-id属性存储对应影视的ID，后续调用currentLink.data('id')只会拿到undefined，导致详情接口请求路径错误。
• 详情接口处理逻辑错误：http://api.tvmaze.com/shows/[id]接口返回的是单个影视对象，不是数组，不需要用$.each遍历，直接读取对象属性即可。
• 代码括号不匹配：整个JS文件末尾的大括号位置混乱，存在语法错误，导致代码无法正常被JS引擎解析执行。

修正后的index.js代码 #

$(function (){
  let $movies = $('#showList')
  let $movie = $('#show')
  // 渲染影视列表
  $.ajax({
    method:'GET',
    url:'http://api.tvmaze.com/shows',
    success: function(movies){
      $.each(movies, function(i,movie){
        // 新增data-id属性存储对应影视ID
        $movies.append('<li><a href="" data-id="'+ movie.id +'">'+ movie.name +'</a></li>')
      })
    }
  })
  // 修正事件绑定语法，指定委托目标为动态生成的a标签
  $('#showList').on('click', 'a', function(event){
    event.preventDefault();
    $('#showList').hide();
    $('#show').empty();
    let currentLink = $(this);
    let currentId = currentLink.data('id');
    // 请求影视详情
    $.ajax({
      method:'GET',
      url:'http://api.tvmaze.com/shows/'+currentId,
      success: function(movie){
        // 直接使用返回的单个影视对象，无需遍历
        $movie.append('<h1>'+ movie.name +'</h1>')
        // 可自行扩展添加评分、简介、封面等其他详情字段
      }
    })
    $('#show').show();
  })
})

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