jQuery too much recursion

Question

Im trying to select a radio box when I click an LI. But i get the error "to much recursion".

Code is:

$('li').click( function(){
     $('li.selected').removeClass('selected');
     $(this).addClass('selected');
     $(this).children("input[type=radio]").click();
});

This is using jQuery 1.4.2 and UI 1.7.2.

Answer 1

when you .click() the child input, the event bubbles up and re-triggers the li's click(). You need to add a .click() to the input and do event.preventBubble=true; in it, or else just set the checked property instead of click()ing it.

Answer 2

Yes, it's event bubbling. Event bubbles up to li

You just have to do this:

$('li').click( function(e){
  if($(e.target).is('li')){
     $('li.selected').removeClass('selected');
     $(this).addClass('selected');
     $(this).children("input[type=radio]").click();
  }
});

Don't add more events below, it's messy

Answer 3

Just in case this helps anyone, this message may show up for various reasons, as described by other contributors, it might be a case of Event bubble. But for me it was a bug in my code which resulted in a never ending function call. A function was calling itself, which was calling itself again, in other words - never ending recursion.

So, just inspect your code and see if there is a situation where jQuery falls into a never ending loop of calling some block.

Answer 4

As a generic answer - the problem appears to be that jquery has too much work to do - i.e. looping through elements etc. I had this problem and when I inspected the page in firebug there were too many elements that I was expecting jquery to tackle.

In firefox Javascript debugger you can click the > next to the error and it will give you more detail as to what is triggering it.