单击父级时触发子级单击事件

Question

假设你有这个 html：

<div class="parent">
    <a href="#" class="child"></a>
    <span>other elements</span>
</div>
<div class="parent">
    <a href="#" class="child"></a>
    <span>other elements</span> 
</div>

孩子有一个点击事件监听器：

$('body').on( 'click', '.child', doSomething );

如果单击父元素的任何部分，如何触发单击？ 我尝试过这样的事情，但它不起作用。 doSomething function 没有被触发。

$('.parent').each( function() {
    $(this).on( 'click', function( e ){
        $(this).find('.child').triggerHandler('click');
        e.preventDefault();
    } );
});

Answer 1

如果您想处理.parent元素的点击，那么为什么不简单地将事件处理程序附加到.parent呢？

$('body').on( 'click', '.parent', doSomething);

也根据jQuery 文档

在文档树顶部附近附加许多委托事件处理程序会降低性能 [...]
为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。 避免过度使用 document 或 document.body 来处理大型文档的委托事件。

// For example, instead of 
$( "body" ).on( "click", "#commentForm .addNew", addComment )
// use 
$( "#commentForm" ).on( "click", ".addNew", addComment ).

Answer 2

您在这里根本不需要.each() 。

您可以尝试以下方法：

 $('.parent').on('click', function(e){ $(this).find('.child').get(0).click(); e.preventDefault(); }); $('body').on('click', '.child', doSomething); function doSomething(e){ console.log('Child of ' +$(e.target).parent().index() +' parent tiggered'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <a href="#" class="child"></a> <span>other elements</span> </div> <div class="parent"> <a href="#" class="child"></a> <span>other elements</span> </div>

Answer 3

$(document).on('click', '.parent, .child', function (event) {
   // do something

});