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

您可能想尝试对事件进行实时绑定，看看是否会产生影响。另一个问题可能是你的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，正如此主题中的其他人指出的那样，有几个拼写错误，并且有几个答案已经尝试为您纠正拼写错误。

Answer 2

实际上我会提出你的问题，因为它会导致我以前不知道的问题：

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

＆＃13;

$("#p").click(function() {
  alert('hello');
});

document.getElementById('i').addEventListener('click', function(e) {
  alert('hello2');
}, false);

＆＃13;

<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>

＆＃13;

＆＃13; 我不知道它是否是一个错误，因为specs只说

将图片地图与显示为IMG元素内容的BUTTON相关联是违法的。

因此，对您而言，解决方案是将事件重新附加到按钮（通过将serach-button ID提供给您的真实按钮元素，或者使用$("#serach-btn").parent().click(function() {。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

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

Answer 4

尝试更改＆＃34; serach＆＃34;到＆＃34;搜索＆＃34;。

您也可以将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();
        }
    });
});

jquery事件不适用于Mozilla并适用于其他浏览器

4 个答案: