jQuery click(） 在 chrome 和 mobile 中不起作用

jQuery click() is not working in chrome and mobile

本文关键字：mobile 不起作用 chrome click jQuery      更新时间：2023-09-26

我正在使用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>

我使用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>

当您要将事件附加到动态 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";
});
相关文章：