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

您无法触发Anchor的点击事件，以便您可以转到该特定来源。

您需要明确地单击它以使其按照您期望的方式工作。

您可以尝试的最佳选择是使用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一起使用，因为它会尝试停止重定向。试试你的本地机器

Answer 2

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

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

另外，您应该在计算机上尝试@Sushanth --建议。

单击父div时模拟单击

2 个答案: