<button>GET list Data</button>
<h3>list-on()</h3>
<ul id ="list">
  
</ul>
<hr>
<h3>list-click()</h3>
<ul id ="list_click">
  
</ul>
$(function(){
  const list = ["apple","android","ios","google"];
  $("button").click(function(){
      /*------list-on()-------------*/
      for(i=0;i<list.length;i++){
        $('#list').append('<li>'+list[i]+'</li>');
      }
      /*------list-click()-------------*/
      for(i=0;i<list.length;i++){
        $('#list_click').append('<li>'+list[i]+'</li>');
      }
   })
/*-------click() and on()---list-------*/
  $( "#list" ).on( "click","li", function()    {
      console.log( $( this ).text() );
      alert($( this ).text());
  });
  $( "#list_click li" ).click(function(){
      console.log( $( this ).text() );
      alert($( this ).text());
  });
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js