jQuery click() is not working in chrome and mobile

Question

I am using Jquery to hide a div and show another div when a <a> tag is clicked. For some reason my code works in FF and IE, but it is not functional in chrome, opera or android browser.

To be more specific, the same jquery code is also used for some other <a> tags in the same page and that works, but not this one.

The <a> tag which doesn't work is inside a bootstrap dropdown menu. I did a lot of research about the issue, but nothing really helped.

Here is the code

JS:

$(document).ready(function() {
    $("#acc").click(function(g) {
        document.getElementById("a").style.display = "none";
        document.getElementById("b").style.display = "none";
        document.getElementById("c").style.display = "block";
    });
});

HTML:

<div id = "main-dropdown" class = "dropdown">
     <a href = "#" class = "dropdown-toggle headerbtn" data-toggle = "dropdown"><img src = "img/3-dots.png"/></a>
     <ul class = "dropdown-menu">
       <li>
          <a id = "acc" class = "acc" href = "#"><img src = "img/Settings.png"/>Settings</a>
       </li>
       <hr style = "color: #FFF; width: inherit; margin: 0px 5px 0px 5px !important;">
       <li>
          <a id = "l" class = "l" href = "#"><img src = "img/Logout.png"/>Logout</a>
       </li>
    </ul>
 </div>

<!--content-->
<div id = "a" style = "display: block;">
</div>
<div id = "b" style = "display: none;">
</div>
<div id = "c" style = "display: none;">
</div>

My Scripts are Linked at the end of the body and are ordered this way :

<script type = "text/javascript" src = "js/jquery-1.9.1.js"></script>
<script type = "text/javascript" src = "js/ajax_jquery.min.js"></script>
<script type = "text/javascript" src = "js/bootstrap.min.js"></script>
<script type = "text/javascript" src = "js/jquery-ui.js"></script>
<script type = "text/javascript" src = "js/main.js"></script>

Answer 1

i use javascript:void(0) to avoid conflict, and change your code to pure jQuery .

 $(document).ready(function() { $("#acc").click(function(g) { $('#a').css('display','none'); $('#b').css('display','none'); $('#c').css('display','block'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id = "main-dropdown" class = "dropdown"> <a href = "#" class = "dropdown-toggle headerbtn" data-toggle = "dropdown"><img src = "img/3-dots.png"/></a> <ul class = "dropdown-menu"> <li> <a id = "acc" class = "acc" href = "javascript:void(0)"><img src = "img/Settings.png"/>Settings</a> </li> <hr style = "color: #FFF; width: inherit; margin: 0px 5px 0px 5px !important;"> <li> <a id = "l" class = "l" href = "#"><img src = "img/Logout.png"/>Logout</a> </li> </ul> </div> <!--content--> <div id = "a" style = "display: block;"> a </div> <div id = "b" style = "display: none;"> b </div> <div id = "c" style = "display: none;"> c </div> 

Answer 2

As you want to attach an event to dynamic html element, you should use .on()

Replace:

$("#acc").click(function(g) {
    document.getElementById("a").style.display = "none";
    document.getElementById("b").style.display = "none";
    document.getElementById("c").style.display = "block";
});

With:

$('body').on('click', 'a#acc', function() {
    document.getElementById("a").style.display = "none";
    document.getElementById("b").style.display = "none";
    document.getElementById("c").style.display = "block";
});