单击父 div 时模拟单击

Question

我正在尝试使用 jquery 在单击父 div 时触发对 <a> 标记的单击

对于这个结构

<div id="menu_container">

                <ul id="header_links_container">


                    <li class="header_link header_link_large border_box_1">
                        <a class="header_link" href="http://amazon.com">LINK 1</a>
                    </li>

                    <li class="header_link border_box_1">
                        <a class="header_link" href="http://google.com">LINK 2</a>
                    </li>


                    <div class="tbc"></div>

                </ul>

            </div>

使用这个

$('#menu_container').on('click', 'li.header_link', function(){
    console.log($(this));
    $(this).children('a.header_link').click();  
});

产生无限量的点击。我猜是因为当我触发 <a> 标签上的 click() 时，它的父 div 也收到了点击，所以它只是再次执行所有操作。

如何在单击父 div 时模拟对锚点的单击？尝试使用来自this SO post 的答案不起作用。

jsbin example

谢谢

Answer 1

您可以使用Elements click method 代替 jQuery。

$('#menu_container').on('click', 'li.header_link', function(){
   console.log('clicked');
   $(this).find("a.header_link").get(0).click();
});

您也应该按照@Sushanth -- 的建议在您的计算机上试用它。

Answer 2

您无法为锚触发点击事件，这样您就可以转到该特定来源..

您需要明确单击它才能使其以您期望的方式工作。

您可以尝试的最佳选择是使用window.location

试试这个

$('#menu_container').on('click', 'li.header_link', function(e){
   console.log('clicked');
   var loc = $(this).find("a.header_link").attr('href');
   window.location = loc;
});

这不适用于jsBin，因为它会尝试停止重定向。 在本地机器上试试 ​