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