javascript - 使用.trigger将事件传递给子级

This question already has answers here:

Trigger click jquery not working
                            
                                （4个答案）
                            
                    
                4年前关闭。
        

    

我试图将父li元素上的click事件传递给它的子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>

最佳答案

为什么不这样做呢？

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

});