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


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -