jQuery click() is not working in chrome and mobile

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>

Answers


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>

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";
});

Need Your Help

TabNavigator not showing children

apache-flex flex3

I have a TabNavigator component which is not showing its children when adding them at runtime.

Registration with Endpoints Server FAILED (App Engine connected Android Project)

java android google-app-engine google-cloud-endpoints

I am new to Android programming and Google App Engine. I followed the below documentation to run a sample app which registers my device: https://developers.google.com/eclipse/docs/endpoints-