Why does the Maximum call stack size exceeded error occur?

Question

JavaScript

temporarily lies on the page
since the button appears on a hover event, we won’t see it on mobile,
so I decided that when clicking on squares__item , the click was transferred to the button

$('.squares__item').on('click', function() {
    $(this).find('.squares__des__button').click();
  })

but for some reason, the error Maximum call stack size exceeded
actually crashes, what did I do wrong?

Answer 1

Apparently you caused a recursion.

Answer 2

Read about event bubbling .

$('.squares__item').on('click', function() {
    $(this).find('.squares__des__button').click();
    //Событие всплывает и происходит новый клик по .squares__item
    //А на нем висит вызов клика по .squares__des__button
   //И так бесконечно
  })

Can be used
but why?
Better hang a single handler on .squares__item . The one that was hung on the poor button. The essence will not change, but the error will go away.