使用.trigger将事件传递给孩子[重复]

Question

我正在尝试将父元素 li 上的点击事件传递给其子元素 a。 以下是我尝试过的代码，它似乎不起作用。我哪里做错了？以及实现这一目标的最佳方法是什么。

编辑 我知道我可以重新设置a 元素的样式，让自己完全摆脱这种情况。但我想知道为什么下面的代码不起作用，以及实现这种事件传递的正确方法是什么。

$('.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>

Answer 1

为什么不这样做呢？

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

});