jquery - Loading bootstrap3 menu items from json response -

i trying show items send server bootstreap munu items. trying following code

html

<ul class="nav navbar-nav navbar-right">     <li class="dropdown"> <span id="info-count"></span>         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list">             <i class="fa fa-list-alt"></i>         </a>         <ul class="dropdown-menu" id="infolist" role="menu">             <!--items should loaded here-->         </ul>     </li> </ul> 

script

$(document).on('click', '#get-info-list', function(event) {     event.preventdefault();     alert('hiiiiiii');     $.getjson('getnotification', function(data) {         console.log(data);         $("#infolist").append(data);     }); }); 

i trying here load data in li menu items. tried code here http://jsfiddle.net/b0ws91e2 click event not working on click on get-info-list. how make work?? above proper way load json response or bootstreap menu provide simple way load data dynamically?

you need write js code in ready event this

$(document).ready( function(){     $('#get-info-list').on('click', function(event) {         event.preventdefault();         alert('hiiiiiii');         $.getjson('getnotification', function(data) {             console.log(data);             $("#infolist").append(data);         });     }); }); 

reference http://jsfiddle.net/b0ws91e2/4/

explanation: reason code being executed when javascript files , code being loaded web page dom not ready, not registering event on specific component. need wait till dom ready, code executed when dom ready