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