javascript - $(document).on('click', .... is not working on file inclusion -

i have header.jsp file

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

some in code

 <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">     </ul> </li> 

i have test.jsp file in header div id have added above header.jsp

<div id="header">    <jsp:include page="/pages/common/header.jsp"/> </div> 

here running test.jsp file script on header.jsp excecuting , showing alert calling in header not calling method below it. on console not printing error.

what may problem?? how resolve this??

i asked related problem here. working properly on same file. on system not working.

try wrap click event inside function , add onclick="functionname(event)" get-info-list element , see happens.

js:

    function clickme(evt){         evt.preventdefault();         alert('hiiiiiii');         $.get('getnotification', function(data) {             console.log(data);             $("#infolist").append(data);         });     } 

html:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list" onclick="clickme(event)"> 

if code working on same file, guess you're loading html file/those elements later on page (via ajax request eg), bindings not available elements because don't exists when script loading.