jquery事件不工作在Mozilla上，并为其他浏览器工作 [英] jquery event not working on mozilla and work for other browser

问题描述

我一直在尝试做一个响应式设计，但点击事件似乎锁定在Mozilla上，并在其他浏览器上工作得很好，我有以下代码：

  jQuery（document）.ready（function（$）{$（＃serach-button）。click（function（）{var display = $（＃head-form）。css（display） （！显示= 无），如果{$（ ＃头形）淡出（）;}其他{$（ 菜单 ）隐藏（）; $（ ＃头形）。 （）;}}）;}）;  

< ; div class =button-responsiv-list>< button class =button-responsiv>< i id =serach-buttonclass =glyphicon glyphicon-search>< / i> < / button>< button class =button-responsiv>< i id =navbar-buttonclass =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-hidestyle =display：none; class =glyphicon glyphicon-indent-left>< / i>< / button>< / div>

/ p>

我试过了e.preventDeafualt（），但是仍然不能正常工作。

解决方案

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

pre $ $（function（）{
$（document）.on（click，＃serach-button，function（）{
if（$（＃head-form）。 （：visible））{
$（＃head-form）。fadeOut（）;
} else {
$（。menu）。hide（）;
$（＃head-form）。show（）;
}
}）;
}）;


另外请注意，你是如何拼写你的类名和id的，正如其他人所指出的线程有几个拼写错误，有几个答案已经尝试纠正你的拼写。

i have been try to make a responsive design but the click event seems locked on mozilla and work just fine on other browser i have the following codes

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>

i had tried the e.preventDeafualt() but still not working.

解决方案

You may want to try live binding the event and see if that makes a difference. The other issue may be your css as the italic tag is an inline element you may not have a decent target area for the click event (this space can vary from browser to browser). You may want to try binding to the parent button tag instead as this should contain the child element. Also since there is no default action to an italic tag or button there is no reason to include a preventDefault() or return false.

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

Also take note of how you are spelling your class names and id's as pointed out by other people in this thread there are several misspellings and several answers have tried correcting that spelling for you.

这篇关于jquery事件不工作在Mozilla上，并为其他浏览器工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！