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?

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?

• javascript
• jquery
• html

Share Improve this question Follow asked Apr 10, 2013 at 9:44 jakobjakob 6,00577 gold badges6565 silver badges103103 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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

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

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

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

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.