On clicking on link and box, event is triggered appropriately but on clicking on date in datepicker nothing is happening although each date has class "ui-state-active" (date's class can be checked in console).
Below is fully executable snippet
$(document).ready(function(){
$("#date").datepicker();
$(document).on('click',function(event){
var clickover=$(event.target);
if(clickover.hasClass("box")){
$("#box").text("on box");
}
else if(clickover.hasClass("link")){
$("#box").text("on link");
}
else if(clickover.hasClass("ui-state-active")){
$("#box").text("on date");
}
});
});
#box{
height:100px;
width:100px;
border:2px solid green;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font Montserret -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,500" rel="stylesheet">
<!-- custom js file -->
<script type="text/javascript" src="js/en1_page.js"></script>
<!-- To Use jquery ui below two are also required -->
<!-- jquery css -->
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/sunny/jquery-ui.css" rel="stylesheet">
<!-- jquery-ui.js library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<a href="#" class="link1 link">Link</a>
<div class="box" id="box"></div>
<div id=date></div>