The issue with jQuery click function seems to be limited to Firefox

After a long hiatus from posting here, I hope this isn't breaking any rules. For those who prefer visual examples, you can visit the live page at:

The drop-down menu functions perfectly in IE, Chrome, and Safari, but seems to be causing issues in Firefox. This has been tested on versions 11.0 and 25.0.1 of Firefox. The menu was recently converted from CSS hover effects to jQuery events for better compatibility with touch screens, which works well except for the Firefox problem.

To keep a record for future reference, here is the basic code snippet:

<script>
    function hideAllDrops (){
        document.getElementById('mainA-sub').style.display='none';
        document.getElementById('mainB-sub').style.display='none';
        document.getElementById('mainC-sub').style.display='none';
    };

$(function(){
    $( "html" ).click(function() {
        hideAllDrops ();
    });
        $( "#mainA" ).click(function(){
        hideAllDrops ();
        document.getElementById('mainA-sub').style.display='block';
        event.stopPropagation();
    });
});
</script>

<li><a class="menuOpt" id="mainA">Guided Hunts</a>
    <div class="nav_sub last" id="mainA-sub">
    <div class="nav_sub_wrapper">
        <ul>
        <li><a href="/subPage">Option 1</a></li>
        <li><a href="/subPage01">Option 2</a></li>
        <li><a href="/subPage03">Option 3</a></li>
        </ul>
    </div><div class="sub_nav_end"></div>
    </div>
</li>

Answer №1

Firefox Console : [00:40:05,423] ReferenceError: event is not defined @

An issue has been detected with your dropdown link. It seems that you have not passed the event as an argument while still using event.stopPropagation(). To resolve this error, please refer to your console in firebug and update your code as shown below:

$( "#about-wrangelloutfitters" ).click(function(event) {
hideAllDrops ();
document.getElementById('about-wrangelloutfitters-sub').style.display='block';
event.stopPropagation();
}); 

Answer №2

Make sure to include the single quotes ' within getElementById('mainA-sub')

    $( "html" ).click(function() {
        hideAllDrops ();
    });

  function hideAllDrops (){
    document.getElementById('mainA-sub').style.display='none';
    document.getElementById('mainB-sub').style.display='none';
    document.getElementById('mainC-sub').style.display='none';
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Horizontal alignment of Bootstrap columns is not working as expected

While attempting to integrate Bootstrap elements into my portfolio, I encountered issues with aligning columns. Currently, the only columns I have added are in the "welcome-section" (Lines 40-52), but they refuse to align horizontally. I've tried tro ...

Is there a method to increase the vertical length of a ::before pseudo-element within a fixed container?

One issue I'm facing is that the ::before selector doesn't extend vertically in a fixed element. Does anyone know of a way to ensure the background fills the entire height? Currently, when a user scrolls, the ::before elemeent stops once the use ...

Utilizing the power of JavaScript, CSS, and HTML to seamlessly transfer selected items from one webpage to the shopping cart displayed on another page

Due to limitations on using back-end code, I'm seeking advice on how to implement this function. Most tutorials I've come across show the items and shopping cart on the same page. I've heard suggestions about using Jquery.load(), but I&apos ...

Dealing with EOFError and Errno::ECONNREFUSED in Watir-Webdriver

As I run a DelayedJobs queue utilizing Watir-Webdriver (with Headless and Firefox) to gather data from the web multiple times each hour, I am facing sporadic EOFError and ECONNREFUSED errors. The script is quite straightforward - it navigates to a website ...

It is important for me to retain the values inputted by the user even when the webpage is refreshed

My form entry web page saves data to a local database via another file called "info1.php" after the submit button is clicked. This file also validates the entered data, such as email addresses, and refreshes the page to the home site if the data is invalid ...

Binding values in Vue.js with a prefix and suffixCreating bindings in Vue

I attempted to bind a value to an input by using a variable declared in the data object, but I also need to include a prefix and a suffix. <input id="topnavback", v-bind:value="rgb({{themestopnavback}})", class="jscolor"/> The value "themestopnavba ...

Shifting an element to the right before revealing or concealing it with Jquery Show/Hide

$(document).ready(function(){ var speed = 700; var pause = 3500; function removeFirstElement(){ $('ul#newsfeed li:first').hide('slide', {direction: "up"}, speed, function() {addLastElement(thi ...

Using jQuery to submit a form by clicking a button or hitting the Enter key

I have a simple form for posting comments that looks like this: <form method="post" action=""> <div class="input-group"> <input type="text" class="form-control" id="chat-input" placeholder="Message..."> <span class="input-gr ...

The Ajax contact form is not submitting the necessary POST data to the PHP script

After creating an html form with ajax: function confirmSendMail() { $(".send_contact").click(function(event){ event.preventDefault(); var name = $("#inputName").val(); var email = $("#inputEmail").val(); var pho ...

vue form is returning empty objects rather than the actual input data

I am attempting to transfer data from my component to a view in order for the view to save the data in a JSON file. I have verified that the view is functioning correctly as I attempted to log the data in the component and found it to be empty, and the r ...

Divide HTML content while keeping inner tags intact

Currently, I am developing an online store. In my code, there is a requirement to display attributes and descriptions for multiple products on a single page. The attributes are displayed in a table format, while the description can include simple text as w ...

Preventing default action in jQuery to avoid interference with serialization and following AJAX request

I am encountering an issue with a php page that contains multiple forms, where I need jQuery to hide each form after the submit button is clicked, without refreshing the entire page. The unique challenge here is that the id's of these forms are dynami ...

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

Using R for web scraping, I encountered a unique situation where the 'next page' button was only programmed to navigate to the top of the page

I am attempting to extract the headline snippets from a local newspaper's articles by utilizing rvest and RSelenium. To access pages beyond the initial one, I need to click on the 'next page' button. Strangely, when I perform this action thr ...

Ways to ensure a div remains at the bottom of a page without using a wrapper

I am currently working on my website and this is the content I have in my body tag: #social-media { width: 175px; margin-left: auto; margin-right: auto; padding-top: 10%; } #social-media img { padding: 5px; } #soci ...

Angular 6 issue: Bootstrap 4 carousel indicators not responsive to clicks

I am currently working on incorporating a Bootstrap 4 carousel into my application, but I seem to be encountering issues with the indicators. Ideally, clicking on any of them should navigate you to the corresponding photo, similar to this example: https:// ...

Validating phone numbers with regular expressions in Java

I recently started learning Java and Regex, and I'm currently facing a challenge with phone number validations. The task at hand is to create simple phone number validations. I already have an input field in my HTML code that has the attribute type=" ...

Overlaying diagonal lines/textures on a gradient or image background

Is it possible to achieve a similar texture/fill effect using only CSS? I am looking to overlay diagonal lines on top of various containers with different background fills, and I would prefer to avoid creating patterns as images if possible. Do you have a ...

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

I've been working on trying to position an image between two divs on my webpage. So far, I've managed to place the image there but it's not responsive (only displays correctly at a width of 1920) and ends up overlapping the text in both divs ...