Jquery Event Not Working On Mozilla And Work For Other Browser

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 i had tried the e.preventD

Solution 1:

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.

Solution 2:

Actually I will upvote your question because it leads to an issue I didn't know before :

elements embedded inside a buttton in FF will lose their click event.

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

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

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

I don't know if it's a bug as specs only state that

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

So for you the solution is to reattach the event to the button (either by giving the serach-button id to your real button element, or with $("#serach-btn").parent().click(function() {.

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

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

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

Solution 3:

Try changing "serach" to "search".

Also you can change jQuery to $:

$(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();
        }
    });
});

Solution 4:

Your button has this class .search-btn so, you can try this:

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