CODEWITHSUNDEEP
javascriptjqueryhtml
jakob
jakob

Reputation: 5995

jquery click within a click causes to much recursion error

As stated in the title I'm having some issues with my JS.

js:

$("#bg2InsideFb").click(function () {
       $("#fbLink").click();
    });

html:

<div id="bg2InsideFb">
    <p id="fbIcon">
        <img src="@routes.Assets.at("images/mobile/login/fblogin-ico.png")" alt="Facebook"/>
    </p>
    <p class="pl20">
        <a id="fbLink" href="@fb.authenticationUrl"> @Messages("review.form.facebook.login") </a>
    </p>
 </div>
 <p class="floatleft f13">
    @Messages("review.form.facebook.term")
 </p>

This results Chrome to crash and Firefox to throw a too much recursion error. What is happening and how do I solve this?

Upvotes: 2

Views: 1860

Answers (5)

Martin Zvar&#237;k
Martin Zvar&#237;k

Reputation: 2479

You can check for ev.target to see if it's the propagation from the inside element.

$(document).on('click', '.photoplaceholder', function(e){
    if (!$(e.target).closest('INPUT[type="file"]').length) {
        $(this).find('INPUT[type="file"]').click();
    }
});

Upvotes: 1

jakob
jakob

Reputation: 5995

Ok I did it like this since the propagation solution did not work for me.

    $(function () {
        $("#bg2InsideFb, #bg2InsideG").click(function () {
            var tmpLink = $(this).find("a").attr("href");
            window.location.href = tmpLink;
        });
    });

Upvotes: 2

Chris
Chris

Reputation: 518

I assume you want to trigger #fbLink. In this case you have to use 

$('#fbLink').click(function(ev) { 
    ev.stopPropagation();  
});
$('#fbLink').triggerHandler('click');``

Upvotes: 1

Nazmul Hasan
Nazmul Hasan

Reputation: 7040

When you are calling $("#fbLink").click(); it actually calling its parents also. that's why its causing recursion error. Could you please explain actually what are you want to do?

$("#bg2InsideFb").click(function () {
   $("#fbLink").click(function(){
      return false;
   });
});

It may works.

Upvotes: 0

Kiruse
Kiruse

Reputation: 1743

You are programmatically clicking #fbLink which is an element within #bg2InsideFb. Event bubbling causes that very same click to effect the later element which then triggers another click. To prevent this, you'll need to hook a listener to the inner element which prevent propagation like this:

$('#fbLink').click(function(jqEvt) {
    jqEvt.stopPropagation();
}

See the jQuery API on event.stopPropagation.

Upvotes: 4

Related Questions