How to catch click in jQuery mobile or radio button?

Question

I have a set of buttons using jquery mobile:

<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align:center">
    <input id="radio1" name="" value="site" type="radio">
    <label for="radio1">
        Site
    </label>
    <input id="radio2" name="" value="transmitter" type="radio">
    <label for="radio2">
        Transmitter
    </label>
    <input id="radio3" name="" value=" channel" type="radio">
    <label for="radio3">
        Channel
    </label>
</fieldset>

And i need to show a pop-up on click or catch click and show it manually. The problem is that jquery mobile renders this content by itself. So is it possible to do?

Answer 1

Because jQuery Mobile creates new button styles, click event must be bound to the span element pretending to be button. Fieldset must be given an id or any other identificator, we will us it to access button elements.

Click event can't be bound to the original radio elements because they have an active css property display: none;

Here's a working example: http://jsfiddle.net/Gajotres/dCEnC/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-fieldset').find('.ui-btn').on('click', function(){      
        $('#popupBasic').popup('open');
    });    
});

Answer 2

I'd put a name in your radio buttons, then some basic jQuery:

$('input[name="myRadioName"].click(function() {
    alert('You clicked' + $(this).val());
}

Wrap it in document.ready, of course.