jQuery动态append添加的列表元素绑定点击事件不触发如何解决

• 事件绑定时机错误：点击事件绑定代码执行时，AJAX请求还未完成，动态生成的li元素还没插入到页面DOM中，$('#list')取不到任何元素，事件绑定直接失效。
• ID重复违规：循环生成li时给每个元素都加了id="list"，而HTML规范要求ID全局唯一，即使后续元素加载完成，也只能匹配到第一个生成的li元素。
• 未阻止默认行为：a标签的href属性为空，点击后会触发页面默认刷新行为，就算日志输出也会被页面刷新覆盖，无法在控制台看到。

采用事件委托机制，把事件绑定到页面初始就存在的父级元素（也就是#showList）上，利用事件冒泡机制监听所有子元素的点击事件，不用关心子元素是初始生成还是后续动态添加的，同时修正重复ID和默认跳转问题。

修改后的完整JS代码如下：

$(function() {
  let $movies = $('#showList')
  let $m = $('#show')
  // 事件绑定到已存在的父元素，委托给子元素a
  $movies.on('click', 'a', function(event) {
    event.preventDefault(); // 阻止a标签默认跳转刷新
    console.log('here');
    // 如需获取当前点击的影视名，可调用 $(this).text() 拿到
  })

  $.ajax({
    method: 'GET',
    url: 'http://api.tvmaze.com/shows',
    success: function(movies) {
      $.each(movies, function(i, movie) {
        // 移除重复的id属性，如需标识可改用class
        $movies.append('<li><a href="">' + movie.name + '</a></li>')
      })
    }
  })
});

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