Using jQuery, I'm simply trying to get the href of the a when the mouse clicks the image or the surrounding area.

HTML template:

<nav id="main_nav">
  <ul>
    <li>
      <a href="/" data-path>
        <img class="dashboard_icon" src="img/icons/nav/dashboard.svg">
      </a>
    </li>
  </ul>
  ... more nav options
</nav>

Styles:

li { list-style: none; display: block; width: 80px; height: 80px; }
a { display: block; width: 100%; height: 100%; }
img { width: 30px; height: 30px; margin: 25px; }

jQuery:

$(document).on('click', '[data-path]', (e) => {
  e.preventDefault();
  let target = $(e.target).attr('href');
  router.navigate(target);
});

But the problem is, whenever I click on the image inside the a, I don't get the href, as it tries to get the href value from the image that I clicked on and not the a. However, if I click on the area surrounding the image, I get the href as desired.

Attempts:

I changed:

let target = $(e.target).attr('href');

To:

let target = $(this).attr('href');

But get absolutely nothing when clicking the image or the surrounding area!

What am I doing wrong? I can't believe I'm asking questions about simple things like this but I've just taken a year off coding and I'm obviously missing something important, and it's baffling me.

I want to be able to click everything inside the a and get the href of the a.

Using jQuery, I'm simply trying to get the href of the a when the mouse clicks the image or the surrounding area.

HTML template:

<nav id="main_nav">
  <ul>
    <li>
      <a href="/" data-path>
        <img class="dashboard_icon" src="img/icons/nav/dashboard.svg">
      </a>
    </li>
  </ul>
  ... more nav options
</nav>

Styles:

li { list-style: none; display: block; width: 80px; height: 80px; }
a { display: block; width: 100%; height: 100%; }
img { width: 30px; height: 30px; margin: 25px; }

jQuery:

$(document).on('click', '[data-path]', (e) => {
  e.preventDefault();
  let target = $(e.target).attr('href');
  router.navigate(target);
});

But the problem is, whenever I click on the image inside the a, I don't get the href, as it tries to get the href value from the image that I clicked on and not the a. However, if I click on the area surrounding the image, I get the href as desired.

Attempts:

I changed:

let target = $(e.target).attr('href');

To:

let target = $(this).attr('href');

But get absolutely nothing when clicking the image or the surrounding area!

What am I doing wrong? I can't believe I'm asking questions about simple things like this but I've just taken a year off coding and I'm obviously missing something important, and it's baffling me.

I want to be able to click everything inside the a and get the href of the a.

• javascript
• jquery
• html

• 1 Maybe just write your code so that, if it detects the clicked item was the <img> rather than the <a>, it traverses up to the parent and then gets the href? – Alexander Nied Commented Feb 12, 2018 at 17:17
• excuse me but, what is "data-path" in the anchor declaration? – Richard Commented Feb 12, 2018 at 17:23
• @Richard; data-path is a custom data attribute (html5doctor./html5-custom-data-attributes) – Martin James Commented Feb 12, 2018 at 17:36

5 Answers 5

You can try e.currentTarget, this will get the element that the event was bound to, e.target will get the element that was actually clicked.

This might get you started:

$(document).on('click', '#main_nav a', function(e) {
   e.preventDefault();
   let target = $(this).attr('href'); 
   alert(target)
});

See jsFiddle Demo

Using jquery it should be:

$(this).parent().attr('href');

Without using jquery this would be:

this.parentNode.getAttribute("href")

Complete code is:

$(document).on('click', 'image-class/id', (e) => {
  e.preventDefault();
 let target = $(this).parent().attr('href');
  router.navigate(target);
});

Image is child of anchor tag, you need to get his parent when you click on image so this done by this way.

Demo: https://jsfiddle/ask3a4gf/

Try : var href = event.toElement.parentElement.href;

Your issue is ing from the use of an arrow function instead of function(e)

Change (e) => { to function(e) { and use $(this).attr('href')

Quoting from mozilla -

An arrow function expression has a shorter syntax than a function expression and does not have its own this