循环后访问元素的ID

Question

我正在使用.get（）构建季节列表。当我这样做时，我将<li><a>附加到我的<ul>元素上。加载完成后，我想访问<a>元素以返回其ID，点击。但是，当我尝试这个时，我无法访问这些元素onclick。

<script type="text/javascript"> 
    $(function(){ 
     var org = localStorage.getItem("org"); 
     var key = localStorage.getItem("key"); 
     var user = localStorage.getItem("user"); 
     $.get('https://domain.com/App/GetSeasons/?user='+user+'&key='+key+'&org='+org, function(xml){ 
      var seasons = $.xml2json(xml); 
      for (i=0; i<=seasons.Season.length; i++){ 
      var seasonName = seasons.Season[i].name; 
      var SeasonID = seasons.Season[i].id; 
      $("#seasonlist").append("<li><a href='#' id="+SeasonID+">" + seasonName + "<span class=pull-right>></span></a></li>"); 
      } 
      }); 
     }); 
    </script> 
<script> 
     $("#seasonlist > li > a").click(function(){ 
          var test = $(this).attr("id"); 
             console.log(test); 
             }); 
</script> 

Answer 1

您需要使用委派动态添加元素：

$('#seasonlist').on("click", 'li > a', function() { 
    var test = $(this).attr("id"); 
    console.log(test); 
}); 

检查documentation

Answer 2

使用.on()将事件处理程序附加到父元素，并将选择器作为参数传递。这适用于动态地添加的元素，以及...

$("#seasonlist").on('click', 'li > a', function(){ 
     var test = $(this).attr("id"); 
     console.log(test); 
}); 

Answer 3

尝试使用.on -

$(document).on('click',"#seasonlist > li > a",function(){ 
    var test = $(this).attr("id"); 
    console.log(test); 
});