Jquery Mobile - Radio group change

Question

I am sure I am missing something very obvious, as I new to Jquery. I am using Jquery Mobile with the following markup:

<div>
    <input data-theme="c" type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
    <label for="radio-choice-1">Option 1</label>
</div>
<div>
    <input data-theme="c" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
    <label for="radio-choice-2">Option 2</label>
</div>
<div>
    <input data-theme="c" type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
    <label for="radio-choice-3">Option 3</label>
</div>

and I am trying to perform an action when the value changes.

So I have:

$(":input[@name='radio-choice-1']").change(function() {
        alert('clicked');
});

Now the first time I select an option, the event doesn't fire. It does fire when I subsequently change it (i.e. the 2nd, 3rd etc. time) but not the first. I assume it is because it not being 'changed' per se, just given a value. I tried to changing it to click but then it never fires.

What am I missing here? Any help much appreciated.

Answer 1

Live Example: http://jsfiddle.net/wWFGf/2/

Alternate HTML Syntax: http://jsfiddle.net/wWFGf/3/

$("[name=radio-choice-1]").change(function() {
    alert('Selected: '+$('input[name=radio-choice-1]:checked').val());
});

Answer 2

I think this will help

$(document).ready(function() {

$(":input[@name='radio-choice-1']").live('change mousedown',function(event) { 
        alert('clicked'); 
}); 

});

Working example here http://jsfiddle.net/XVuAs/1/