<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());
});
})
This Pen doesn't use any external CSS resources.