Uncaught RangeError: Maximum call stack size exceeded

Question

I have some modules which I want them to be currsor:pointer but aren't <a> tags, the links are children of this blocks, this blocks have the .clicable class,

So what am I trying to do is to: If a .clicable element has been clicked, prevent default and click on the first found child link

$('section').on('click', '.clicable', function (e) {
    var $links = $(this).find('a');
    if( $links.length > 0 ) {
        $links.eq(0).click();   
    }
});

The thing is that I get this console error:

Uncaught RangeError: Maximum call stack size exceeded

Any idea what am I missing?

This is how one of the .clicable elements looks like:

<div class="spa clicable " style="background-image:url(http://localhost:8096/files/Cachorro-1-camada-Izu-y-Sol-800x400.JPG);">
       <div>
         <p><a href="http://localhost:8096/spa">Category</a></p>
         <h4>Title</h4>
       </div>
</div>

I tried to add this:

$('.clicable a').on('click' , function (e) {
    console.log(true);
    e.stopPropagation();
});

But this way no errors are received, the true is logged but the page doesn't go to the link location

Answer 1

Do the redirect in javascript directly instead of triggering the click event, as that avoids the whole bubbling up recursion thing.

$('section').on('click', '.clicable', function (e) {
    var $links = $(this).find('a');
    if( $links.length > 0 ) {
        window.location.href = $links.get(0).href;
    }
});

Generally there's no reason to redirect when clicking a parent like this, as you should just style your anchors differently and click those instead without needing any javascript to redirect.

Answer 2

Check to see if what was clicked is a link, if not, than find the link.

$('section').on('click', '.clicable', function (e) {
    if (!$(e.target).is("a")) {
        $(this).find('a')[0].click();
    }
});

Answer 3

Condition not being met here. Change this

if( $links.length > 0 )
{
    $links.eq(0).click;
}

to this

if( $links.length > 0 )
{
    $links.eq(0).click;
    $links--;    // reduce size of links so that condition is met
}

It will call itself infinitely if you don't meet condition.