Запускать событие дочернего щелчка при нажатии на родительский элемент

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 не запускается.

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

Answer 1

Здесь .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 2

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

});

Answer 3

Если вы хотите обработать щелчок для элементов .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 ).