jquery click within a click causes to much recursion error

Question

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?

Kiruse · Accepted Answer · 2013-04-10 09:49:29Z

4

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.

answered Apr 10, 2013 at 9:49

Kiruse

1,7431 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jakob Over a year ago

Hmm I added your code, no error now, but nothing happens. I guess I missed something?

Kiruse Over a year ago

@jakob I don't even know what it's supposed to do. Since it is a link, I assume new content ought to be loaded. What is your new code?

jakob Over a year ago

Yes you are correct. The new content should be loaded. The code is the same as before I just added the stopPropagation code to js file.

Kiruse Over a year ago

@jakob There shouldn't be any issue with stopPropagation. I'd assume the error to lie somewhere else. Is it an asynchronous request or have you registered more click handlers on anchors?

jakob Over a year ago

Hmm a regular syncronous request to antother page on the same domain If I do $('#fbLink').click(); in chrome console I get back: [ <a id="fbLink" href="/authenticate/facebook"> Facebook-konto </a> ] shouldn't click result in clicking on the link and moving to /authenticate/facebook

|

jakob · Accepted Answer · 2013-04-16 06:35:44Z

2

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;
        });
    });

answered Apr 16, 2013 at 6:35

jakob

6,0157 gold badges66 silver badges103 bronze badges

Comments

Chris · Accepted Answer · 2013-04-10 09:57:09Z

1

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

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

edited Apr 10, 2013 at 9:57

answered Apr 10, 2013 at 9:51

Chris

5182 silver badges11 bronze badges

2 Comments

Benubird Over a year ago

No, trigger still causes bubbling. I think you meant .triggerHandler(), but that still doesn't quite answer the OP

Chris Over a year ago

My fault, yes I meant triggerHandler(). Thanks for correcting me.

Martin Zvarík · Accepted Answer · 2022-07-18 22:42:31Z

1

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();
    }
});

answered Jul 18, 2022 at 22:42

Martin Zvarík

2,52726 silver badges34 bronze badges

Comments

Nazmul Hasan · Accepted Answer · 2013-04-10 09:52:59Z

0

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.

answered Apr 10, 2013 at 9:52

Nazmul Hasan

7,07013 gold badges38 silver badges37 bronze badges

Collectives™ on Stack Overflow

jquery click within a click causes to much recursion error

5 Answers 5

7 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related