For some time now, I've been facing this issue and I'm at a loss trying to figure it out. I have attempted various solutions such as using .click(), .on(), .delegate, and even utilizing .find() to locate the specific element causing the problem. However, despite my efforts, the click event still refuses to work...
$('.fa').on("click",function({
alert("hi");
});.main .header {
background: #999;
min-height: 80px;
}
.main .header ul {
list-style: none;
margin: 0;
padding: 0;
}
.main .header .nav-settings {
float: right;
line-height: 80px;
border-left: 1px solid #ccc;
}
.main .header .nav-settings li {
display: inline-block;
}
.main .header .nav-settings li:hover {
background: #2dbde4;
}
.main .header .nav-settings li a {
padding: 0 20px;
color: #fff;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main">
<header class="header">
<nav class="nav-settings">
<ul>
<li><a href="#" class="user">Josh</a>
</li>
<li><a href="#" class="fa fa-chevron-down"></a>
</li>
</ul>
</nav>
</header>
</div>