jquery method to make entire navigation bar clickable

I have a single menu bar. I recently discovered an interesting way to make the entire menu bar area clickable using jQuery.

Design code snippet:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl"%>
<link rel="stylesheet" href="css/Menu3.css" type="text/css" />
<div id="header" align="center">
<script type="text/javascript" language="javascript">
$(document).ready(function() {                 
     $(".Menu").click(function(e) {
         window.location = $(e.target).find("a").attr("href");
         return false;
     });
});
</script>
<table width="100%" cellpadding ="0" cellspacing ="0" align="center">
<tr>
....(The remaining code is omitted)....

However, when I click on the original menu item, it throws an error like:

Server Error in '/EasyWeb' Application.
--------------------------------------------------------------------------------

The resource cannot be found. 
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /EasyWeb/undefined


--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:2.0.50727.3053; ASP.NET Version:2.0.50727.3053

Is there an issue with my jQuery code??

------------------------------------Updated-----------------------------------------

Here is the full HTML markup:

<table width="100%" cellpadding ="0" cellspacing ="0" align="center">
.....(The remaining code is omitted)......
javascriptjqueryhtmlcss

Answer №1

Your issue lies in the following code:

window.location = $(e.target).find("a").attr("href");

When you click on the a element, e.target becomes the a element itself, which causes...

$(e.target).find('a');

to return an empty jQuery object because e.target has no child elements. To address this, modify your code as follows to use e.target:

var $a = e.target.nodeName.toLowerCase() == 'a' ? $(e.target) : $(e.target).find('a');
window.location = $a.attr('href');

This adjustment checks if you have clicked on the a element already. If yes, it uses it; if not, it searches for it.

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

Experience the power of Vue Google Chart - Geochart where the chart refreshes seamlessly with data updates, although the legend seems to disappear

I have integrated vue google charts into my nuxt project. Whenever I select a different date, the data gets updated and the computed method in my geochart component correctly reads the new data. However, the legend or color bar at the bottom does not funct ...

javascriptvue.jsnuxt.jsvuexreact-google-charts

Tips for locating an element within pre-processed HTML content

Is there a way to modify this code snippet to target the 'price' element within each 'info_block' instead of displaying the entire 'info_block' content? My ultimate goal is to locate the price within every 'info_block&apo ...

phphtmlxpathdomdocument

Put the title tag within a script in the shell

Within an HTML snippet, I currently have a <title> tag that I need to change on a monthly basis when generating reports. While I can manually update it each month, I am looking for a way to automate this process so the title reflects the relevant rep ...

htmlshelltagstitle

What is the most effective way to display a tooltip next to an image?

I've been exploring various jQuery plugins in search of a tooltip feature that displays text, description, and rating while using the same image inside the tooltip. However, I have not been successful in finding one that fits my criteria. Therefore, ...

jqueryjquery-pluginstooltipjquery-tooltip

Struggling to break free from the confines of an overflow-hidden container in swiperjs due to

I have a slider that utilizes swiperjs and I want to incorporate a dropdown menu within each swiper-slide. However, I've encountered an issue where the dropdown menu is unable to escape the root container due to the positioning constraints. For a dem ...

cssescapingoverflowhiddenswiper.js

Steps for retrieving information from a View, transferring it to a Controller, and subsequently forwarding it to another View

Hello everyone! So, I have a situation where I need to pass values from a view using @Html.ActionLink to a controller and then pass them to a new view. I've tried creating a ViewModel that matches the values I need, but when I try to show these result ...

c#htmlasp.netmodel-view-controller

JQuery integration resulting in disappearance of Input-group-btn element

Allow me to explain my current project. I am in the process of developing a Modal that enables users to input a password There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right sid ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

A guide on how to activate an event when a radio button is selected using jQuery

I experimented with implementing this. When I try clicking on the radio button, the code functions correctly, but the radio button does not appear to be checked and remains unchanged. Any ideas on how to resolve this issue? <p> <input id="p ...

javascriptjqueryhtml

Generate various shapes using a loop

Hello, I'm currently working on creating multiple forms using a loop that is generated from dynamic elements fetched from the database. However, I believe there might be some issues in my approach. Below is what I have tried so far. While it works to ...

javascriptformsvue.jsvuejs3

Issue with HTML While Utilizing wp_get_attachment_image

This script : $source = wp_get_attachment_image( get_the_ID(), 'medium' ); $weburl = wp_get_attachment_image_url( get_the_ID(), 'full' ); echo( '<p><a href="%s"><img src="%s"></a></p>', $weburl, ...

phphtmlwordpress

Using Cypress for drag and drop functionality within shadow DOM

I encountered an issue in cypress with drag and drop functionality within the shadow dom. My attempt to perform a drag event is as follows: cy.get(".shadow-app>div>div:nth-child(1)", { includeShadowDom: true }).trigger("dragstart&q ...

javascriptdrag-and-dropcypressshadow-domreact-dnd

Having trouble locating the OBJ file in your Three.js WebGL project?

I am attempting to load an obj file using Three.js, but despite following various tutorials and resources online, I am only met with a black screen and no error messages in the console. The console output from the LoadingManager indicates that the objects ...

javascriptthree.jssketchup

Smooth scrolling on a single hash anchor to reach the top using jQuery

I have implemented a jQuery smooth scroll function in my code: $('a[href*=#]').on('click',function(event){ //event.preventDefault(); // not required $('html,body').animate({scrollTop:$(this.hash).offset().top},500); }); It ...

jqueryscroll

Confirming the selected value in a dropdown menu

When a user fails to select a value from the dropdown labeled "Select City," I want a validation message to appear saying, "Please Select your City." I attempted the following approach but it did not work: [Required] public IEnumerable<LocationInforma ...

jqueryasp.netasp.net-mvc

Unlocking a targeted list in AngularJS

I have the following code snippet that I am using to implement ng-repeat in an Angular project. My goal is to display only the list item that I click on, but currently, when I click on the symbol ~, it displays all the lists. Is there a way to specify cer ...

javascripthtmlangularjs

Issue: Unable to locate module 'js-yaml' while executing npm start command

Unable to locate module 'js-yaml' Require stack: D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\loaders.js D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\createExplore ...

javascriptnode.jsreactjsreact-nativenpm

The background only partially covers the section

In a current project test using the provided template from , I encountered an issue when changing the section <section role="main" id="main"> to incorporate the carbon class as the background does not fill completely. My attempts to adjust the secti ...

htmlcss

Three.js not rendering any objects, only displaying a blank black screen

I've encountered a similar issue with a few of my other three.js codes. I've set up the JavaScript within HTML, but the objects aren't appearing on the screen. Every time I run the file, it just shows a black screen. The file is supposed to ...

javascripthtmlthree.js

Ensuring the Sticky Table Header Moves Alongside Horizontal Scroll

I've been working with an HTML table that has a sticky header, meaning the header stays in place as the table scrolls vertically. However, I'm facing an issue where I need the header to move along with the horizontal scroll, but remain fixed ver ...

htmljquerycss

Implementing login functionality in an Angular application with the help of Kinvey.Social and utilizing the Promise API

I have been utilizing the Kinvey HTML5 library in an attempt to create a client-side application that integrates Google identities for Login. While the Oauth transaction appears to be functioning properly, I am encountering an issue with toggling the visib ...

javascripthtmlangularjskinvey