javascript - jQuery Mobile click event.preventDefault does not seem to prevent change -

i trying prevent radio button changing when use clicks, works when using standard jquery when include jquery mobile not seem work, there else have in jquery mobile?

<fieldset data-role="controlgroup"  data-type="horizontal">         <input type="radio" name="trade-direction" id="buy" value="b" checked="checked" />         <label for="buy">buy</label>          <input type="radio" name="trade-direction" id="hold" value="h"  />         <label for="hold">hold</label>          <input type="radio" name="trade-direction" id="sell" value="s"  />         <label for="sell">sell</label> </fieldset>  $('[name="trade-direction"]:radio').click(function(event) {     if(!confirm("do want change?")) {         event.preventdefault();     } }); 

below link code in jsfiddle.

http://jsfiddle.net/mikeu/xjaaa/

the problem jquery.mobile, element effected ui change not input element. in fact, radio element isn't clicked @ all. element clicked <div class="ui-radio">. if want bind radio input itself, need use change event, in case won't work you, because function gets called after change has taken place.

what need this:

// idea give fieldset id or class   $('fieldset').delegate('.ui-radio','click',function(event){       if(!confirm("do want change?")) {         event.stopimmediatepropagation();         event.preventdefault();       }    }) 

the event.stopimmediatepropagation() prevents the .ui-radio triggering click event input, , event.preventdefault prevents default action. stopimmediatepropagation may not necessary, gives added guarantee may helpful across different browsers.