Radio input in header of accordion problem ?BUG

Question

SOLVED!

$('#bset1').click(function(event) {                                                                 
    event.stopPropagation();                                                                                    
    });        

I have several radio buttons in the element. Everything works fine, but when I add .accordion() to the parent div, radio buttons stop working (after the initial selection)

Here is the link: http://jsfiddle.net/Lrnj8/5/

remove accordion creation to see the difference

$('[id^=rad]').click (function () {return false;}) 

does not help

I've been struggling with this for the past week! In the end, I wrote my own .click() handler, but there must be an easier way!

$(function() {                                                                                                      
$("body")                                                                                                       
    .append($('<div/>')                                                                                         
        .attr ('id','main'));                                                                                   
var str1='<input type=radio id=rad1 name=r1><label for=rad1>1</label>'                                          
    +'<input type=radio id=rad2 name=r1><label for=rad2>2</label>'                                              
    +'<input type=radio id=rad3 name=r1><label for=rad3>3</label>';                                             

$('#main')                                                                                                      
    .append($("<h3/>")                                                                                          
        .append ($('<a>')                                                                                       
        .attr ({                                                                                                
        'id':'header1'                                                                                          
        })                                                                                                      
        .html('HEADER'))                                                                                        
        .append($('<span\>')                                                                                    
            .attr ('id','bset1')                                                                                
            .html (str1)                                                                                        
            ))                                                                                                  
//php takes care of that                                                                                                               
if (1==$_GET['a'])  $('#main').accordion();                                                         

}) 

Answer 1

You must insert your radios inside a div after each H3 (sections)

<div id="main">
    <h3><a>TEST</a></h3>
    <div>
        <input type="radio" id="rad1" name="r1" /><label for="rad1">1</label>
    </div>
    <h3><a>TEST</a></h3>
    <div>
        <input type="radio" id="rad2" name="r1" /><label for="rad2">2</label>
    </div>
    <h3><a>TEST</a></h3>
    <div>
        <input type="radio" id="rad3" name="r1" /><label for="rad3">3</label>
    </div>
</div>

You can try this live example

http://jsfiddle.net/Lrnj8/

Answer 2

SOLVED!

$('#bset1').click(function(event) {                                                                 
    event.stopPropagation();                                                                                    
    });