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.
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.
Comments
Post a Comment