2

I am trying to prevent a radio button from changing when a use clicks, it works when using standard jQuery but when you include jQuery Mobile it does not seem to work, is there something else I have to do 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 You Want To Change?")) {
        event.preventDefault();
    }
});

below is a link to the code in jsFiddle.

http://jsfiddle.net/mikeu/xJaaa/

Mike U
  • 2,901
  • 10
  • 32
  • 44

1 Answers1

4

The problem is that with jQuery.Mobile, the element that is effected by the UI change is not the input element. In fact, the radio element isn't actually clicked at all. The Element that is clicked is <div class="ui-radio">. If you want to bind to the radio input itself, you need to use the change event, but in this case it won't work for you, because the function gets called after the change has already taken place.

What you need is something like this:

// Probably a good idea to give your fieldset an ID or class

 $('fieldset').delegate('.ui-radio','click',function(event){
      if(!confirm("Do You Want To Change?")) {
        event.stopImmediatePropagation();
        event.preventDefault();
      } 
  })

The event.stopImmediatePropagation() prevents the the .ui-radio from triggering the click event to the input, and the event.preventDefault prevents the default action. The stopImmediatePropagation may not be necessary, but it gives an added guarantee that may be helpful across different browsers.

dgo
  • 3,877
  • 5
  • 34
  • 47
  • Thanks for your reply, I dont seem to be able to get your code to work, any chance you could have a look at http://jsfiddle.net/mikeu/qe29J/ and let me know what i need to change? – Mike U May 15 '13 at 02:12
  • Thanks, I have figured out the problem with the code, delegate was spelled incorrectly. I now have another issue the confirm dialog shows twice, any idea how to fix that? – Mike U May 15 '13 at 02:23
  • Whoops .. sorry about the spelling error. I'll look at the other thing. – dgo May 15 '13 at 02:33
  • The confirm dialog only shows once on the fiddle I'm using, but I have a guess as to why it may be happening. What browser are you using? – dgo May 15 '13 at 02:35
  • Im using Chrome Version 26.0.1410.65 – Mike U May 15 '13 at 02:39
  • It works in Safari on Mac, does not work in Chrome on mac or PC and IE 9 – Mike U May 15 '13 at 02:53
  • You took out `event.stopImmediatePropagation()`. When I put that back, it only shows once. *See the last paragraph of my answer.* Also, the `return false` is not necessary, and probably should be excluded unless you are returning a different value when the user clicks `OK`. Why? Not sure exactly, but I think there are circumstances where unnecessary returns cause problems. – dgo May 15 '13 at 16:48