using .trigger to pass event to child

Question

I am trying to pass a click event on parent li element to its child a. following is the code I have tried, which does not seem to work. Where did i go wrong? and what is the best way to achieve this.

EDIT I understand I can restyle my a elements and get myself completely out of this situation. But I want to know why the bellow code is not working and what is a propper way to achive this kind of passing of events.

$('.menuItem').click(function() {
  $(this).children('a').trigger('click');
});

ul {
  list-style: none;
  padding: 0px;
  position: relative;
  z-index: 1000;
  display: inline-block;
  background-color: white;
  height: 30px;
}
ul li {
  display: inline-block;
  padding: 20px;
  margin-right: 0px;
  font-weight: 500;
  background-color: white;
  cursor: pointer;
}
ul li:hover {
  background-color: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="menuItem">
    <a href="www.google.com">
      Home
     </a>
  </li>
  <li class="menuItem">
    <a href="www.google.com">
      About
     </a>
  </li>
  <li class="menuItem">
    <a href="www.google.com">
      News
     </a>
  </li>
  <li class="menuItem">
    <a href="www.google.com">
      Gallery
     </a>
  </li>
  <li class="menuItem">
    <a href="www.google.com">
      Media
     </a>
  </li>
  <li class="menuItem">
    <a href="www.google.com">
      Contact
     </a>
  </li>
</ul>

yes, you're right. it doesn't make any difference... I had case once when it did, my bad. ;) — Tinmar, Mar 29 '16 at 10:56
why not attack `a` directly and do what ever you want to do with it like `$('.menuItem a').click(function() {` — guradio, Mar 29 '16 at 10:58
@guradio the `a` is a simple link, I don't want to do anything custom, all i want is click event passed to child. I can solve this particular case by wrapping `li` inside `a`, but I want to know why the above is not working. — Prakhar Thakur, Mar 29 '16 at 11:08
Consider restyling your `` tags instead of trying to listen to clicks on the list elements, then you will get the clicks for free. — Danyal Aytekin, Mar 29 '16 at 11:09
is this the same problem? http://stackoverflow.com/questions/5867370/trigger-click-jquery-not-working — Tinmar, Mar 29 '16 at 11:27

Zorken17 · Accepted Answer · 2016-03-29T11:42:58.860

1

Why not do it this way?

$('.menuItem').click(function() {
  var href = $('a', this).attr('href');
  window.location.href = href; //causes the browser to refresh and load the requested url

});

edited Mar 29 '16 at 11:42

answered Mar 29 '16 at 11:17

Zorken17

1,896
1
10
16

Can you please also explain the above. – Prakhar Thakur Mar 29 '16 at 11:21
What do you want me to explain? The code above gets the href-value from the first a element of .menuItem. – Zorken17 Mar 29 '16 at 11:24

using .trigger to pass event to child

1 Answers1