jquery-mobilejquery-eventscollapsable

JQM: Is it possible to put controlgroups inside a collapsible bar and not propagate the click event?


My real desire is to create a selectable tree for JQM (with 3 values for each element). I tried to do with nested collapsible divisions, and this works fine. But when I tried to add the 3 radios on each collapsible bar, the events don't fire properly.

I think the collapse/expand event hooks the click event of the radios. The effect is when you click the radios, the collapsible is expanded and the radio is not checked.

<div data-role="collapsible" data-theme="b" data-content-theme="d" id="accordion1">
<h3>60
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
    <input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-asign" value="60-asign">
    <label for="selcrit-CLP-60-asign">Asign</label>
    <input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-omit" value="60-omit">
    <label for="selcrit-CLP-60-omit">Omit</label>
    <input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-nothing" value="60-nothing">
    <label for="selcrit-CLP-60-nothing">Nothing</label>
</fieldset>                                                         
</h3>                               
<div stylee="margin: 0 10px;">
    Content for 60
</div>

Here is the jsfiddle with the example: http://jsfiddle.net/Hz8Ef/

Any idea? Can I do in other way?


Solution

  • Solved!

    $(document).ready(function() {
    $("div .ui-radio").click(
        function(e){                            
            var radioId = $(this).children(":first").attr('name');
            $('input[name=' + radioId + ']').checkboxradio( "refresh" );
            e.stopPropagation();
            }
        );
    

    });

    Here the complete solution: http://jsfiddle.net/VuaQg/1/