jQuery click（）在Chrome和Mobile中不起作用

Question

我正在使用Jquery隐藏div并在单击<a>标记时显示另一个div。 由于某种原因，我的代码可在FF和IE中使用，但在chrome，opera或android浏览器中不起作用。

更具体地说，相同的jquery代码也用于同一页面中的其他<a>标记，并且有效，但不适用于此标记。

<a>标记无效，位于引导程序下拉菜单中。 我对此问题进行了大量研究，但没有任何帮助。

这是代码

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>

我的脚本链接在正文的末尾，并按以下方式排序：

<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

我使用javascript:void(0)避免冲突，并将您的代码更改为纯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

当您要将事件附加到动态html元素时，应使用.on（）

更换：

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

带有：

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