單擊父級時觸發子級單擊事件

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

});