如何使用JavaScript确定在UL列表中单击了哪个LI标签？

Question

请注意，addEventListener（）附加在UL标签上，而不在LI标签上。 LI标签是动态创建的，因此我不能在UL标签上附加事件监听器。请参见下面的示例代码：

$('document').ready(function() {
    var teams = ['Bulls', 'Lakers', 'Warriors'];
    var content = "";

    function populateList(listItems) {
      var contents = "";
      listItems.forEach(function(item){
        contents += '<li>' + item + '</li>';
      });
      return contents;
    }

    content = populateList(teams);
    $('#location').html(content);
    $('#header').html('Teams');

    $('#location li').on('click', function() {
      var heading = $('#header').text();
      var clickedItem = $(this).text();
      if ('Teams' === heading) {
        var playersRooster = "";
        if ('Bulls' === clickedItem) {
          var bullsPlayers = ['Jordan', 'Pippen', 'Kukoc'];
          playersRooster = populateList(bullsPlayers);
          $('#location').html(playersRooster);
          $('#location li').on('click', function(){
            var awardsList = "";
            var awards = [];
            clickedItem = $(this).text();
            if ('Jordan' === clickedItem) {
              awards = ['5 times MVP', 'GOAT'];
              awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
            } else if ('Pippen' === clickedItem) {
              awards = ['No MVP Awards', 'Best Pointguard of the Season'];
              awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
            } else {
              awards = ['No MVP Awards', 'Best Three-Pointer of the Season'];
              awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
            }
            $('#location').html(awardsList);
            $('#header').html('Awards [by ' + clickedItem + ']');
          });
        } else if ('Lakers' === clickedItem) {
          var lakersPlayers = ['Bryant', 'Johnson', "O'neal"];
          playersRooster = populateList(lakersPlayers);
          $('#location').html(playersRooster);
          $('#location li').on('click', function(){
            var awardsList = "";
            var awards = [];
            clickedItem = $(this).text();
          if ('Bryant' === clickedItem) {
            awards = ['4 times MVP', 'Almost the GOAT'];
            awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
          } else if ('Johnson' === clickedItem) {
            awards = ['3 times MVP', 'The Magician'];
            awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
          } else {
            awards = ['2 times MVP', 'The Biggest Man of the Season'];
            awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
          }
          $('#location').html(awardsList);
          $('#header').html('Awards [by ' + clickedItem + ']');
        });
      } else if ('Warriors' === clickedItem) {
        var dubsPlayers = ['Durant', 'Curry', 'Green'];
        playersRooster = populateList(dubsPlayers);
        $('#location').html(playersRooster);
        $('#location li').on('click', function() {
          var awardsList = "";
          var awards = [];
          clickedItem = $(this).text();
          if ('Durant' === clickedItem) {
            awards = ['1 time MVP', 'Well-rounded-all-corner-shotguy'];
            awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
          } else if ('Curry' === clickedItem) {
            awards = ['1 time MVP', 'Highest 3 Pointer of the Season'];
            awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
          } else {
            awards = ['No MVP Awards', 'Green but Black'];
            awards.forEach(function(award) { awardsList += '<li>' + award + '</li>'; });
          }
          $('#location').html(awardsList);
          $('#header').html('Awards [by ' + clickedItem + ']');
        });
        $('#header').html('Players');
      }
    }
  });
});

我必须重复$（''）。on（）方法使其起作用。这有捷径吗？一种不让我的代码看起来像意大利面条代码的解决方法？

这是HTML部分（删节版）：

<div id='container'>
  <div id='header'>Unknown</div>
  <ul id='location'>
    <li>A</li>
    <li>B</li>
  </ul>
</div>