jquery 事件不适用于 mozilla 并适用于其他浏览器答案

【问题标题】：jquery event not working on mozilla and work for other browserjquery 事件不适用于 mozilla 并适用于其他浏览器
【发布时间】：2015-03-14 03:45:47
【问题描述】：

我一直在尝试进行响应式设计，但点击事件似乎锁定在 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() 但仍然无法正常工作。

【问题讨论】：

前段时间我也遇到过这种情况。在 e.preventDeafualt() 之后；添加返回假；或者只是返回false；而不是 preventDefault
我试过这个代码 e.preventDefault();返回假；但不工作
在您的标记中，#head-form 是哪里？
#head-form 是一个 div 听例子link
该链接已损坏。您可以使用最少的标记更新问题中的标记。

标签： javascript jquery css firefox

【解决方案1】：

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

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

【讨论】：

不工作问题是事件根本没有触发我试过警报也不起作用

【解决方案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();
        }
    });
});

【讨论】：

serach 是代码在其他浏览器上工作的 id 名称

【解决方案3】：

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

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

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

【讨论】：

问题是斜体我客人你是对的上找不到要点击的空间
@abdelbasset 不，这不是（仅）关于空间的。这真的是因为 FF 不处理 button 元素内的对象上的事件。我不会称其为错误，因为我不知道良好的行为应该是什么。（specs 只说“将图像映射与显示为 BUTTON 元素内容的 IMG 相关联是非法的。”）看看我的答案作为示例。跨度>

【解决方案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 只声明

将图像映射与作为BUTTON 元素的内容出现的IMG 相关联是非法的。

因此，对您而言，解决方案是将事件重新附加到按钮（通过将 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>

【讨论】：