jquery 事件不适用于 mozilla，适用于其他浏览器

Question

我一直在尝试进行响应式设计，但是点击事件似乎在 mozilla 上被锁定并且在其他浏览器上工作得很好我有以下代码

jQuery(document).ready(function($){

 $("#serach-button").click(function() {
 var display=$("#head-form").css("display");
 if(display!="none"){
  $("#head-form").fadeOut();
 }else{
  $(".menu").hide();
  $("#head-form").show();
 }
 });
  });

<div class="button-responsiv-list">
<button class="button-responsiv"><i id="serach-button"class="glyphicon glyphicon-search"></i></button>
<button class="button-responsiv"><i id="navbar-button" class="glyphicon glyphicon-align-justify"></i></button>
<button class="button-responsiv" ><i id="sidebar-button-show"  class="glyphicon glyphicon-indent-right"></i>
<i id="sidebar-button-hide" style="display:none;" class="glyphicon glyphicon-indent-left"></i>
</button>
</div>

我试过 e.preventDeafualt() 但还是不行。

Answer 1

你的按钮有这个 class .search-btn 所以，你可以试试这个：

$(function(){
   $(".search-btn").click(function() {
      if($("#head-form").is(":visible")){
         $("#head-form").fadeOut();
      }else{
         $(".menu").hide();
         $("#head-form").show();
      }
   });
});

Answer 2

尝试将 "serach" 更改为 "search"。

您也可以将 jQuery 更改为 $:

$(document).ready(function () {
    $("#search-button").click(function () {
        var display = $("#head-form").css("display");
        if (display != "none") {
            $("#head-form").fadeOut();
        } else {
            $(".menu").hide();
            $("#head-form").show();
        }
    });
});

Answer 3

您可能想尝试实时绑定事件，看看是否有所不同。另一个问题可能是您的 css，因为斜体标记是一个内联元素，您可能没有合适的点击事件目标区域（这个 space 可能因浏览器而异）。您可能想尝试绑定到父按钮标签，因为它应该包含子元素。此外，由于斜体标签或按钮没有默认操作，因此没有理由包含 preventDefault() 或 return false.

$(function(){  
    $(document).on("click", "#serach-button", function() {
      if($("#head-form").is(":visible")){
         $("#head-form").fadeOut();
      }else{
         $(".menu").hide();
         $("#head-form").show();
      }
   });
});

还请注意您的 class 名称和 ID 的拼写方式，正如该线程中其他人指出的那样，有几个拼写错误，并且有几个答案已尝试为您更正该拼写。

Answer 4

实际上我会支持你的问题，因为它会导致一个我以前不知道的问题：

在 FF 中嵌入按钮内的元素将失去其点击事件。

$("#p").click(function() {
  alert('hello');
});

document.getElementById('i').addEventListener('click', function(e) {
  alert('hello2');
}, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b">
  <img id="i" src="http://lorempixel.com/25/20" />
  <em id="em">elements embedded inside a buttton in FF will lose their click event.</em>
</button>

我不知道这是不是一个错误，因为 specs 只说明

It is illegal to associate an image map with an IMG that appears as the contents of a BUTTON element.

所以对你来说，解决方案是将事件重新附加到按钮（通过将 serach-button id 赋予你的真实按钮元素，或者使用 $("#serach-btn").parent().click(function() {.

jQuery(document).ready(function($) {

  $("#serach-button").parent().click(function() {
    alert('hello');
  });
  $("#real-button").click(function() {
    alert('hello');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-responsiv-list">
  <button class="button-responsiv"><i id="serach-button" class="glyphicon glyphicon-search"></i>
  </button>
  <button class="button-responsiv" id="real-button"><i id="navbar-button" class="glyphicon glyphicon-align-justify"></i>
  </button>
  <button class="button-responsiv"><i id="sidebar-button-show" class="glyphicon glyphicon-indent-right"></i>
    <i id="sidebar-button-hide" style="display:none;" class="glyphicon glyphicon-indent-left"></i>
  </button>
</div>

jquery 事件不适用于 mozilla，适用于其他浏览器

jquery event not working on mozilla and work for other browser

javascript

css

firefox

jquery