jQuery Мобильный клик event.preventDefault, похоже, не мешает изменению

Question

Я пытаюсь запретить изменение переключателя при использовании кликов, он работает при использовании стандартного jQuery, но когда вы включаете jQuery Mobile, он, похоже, не работает, есть что-то еще, что мне нужно сделать в 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(); 
    } 
}); 

Ниже приведена ссылка на код в jsFiddle.

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

Answer 1

Проблема заключается в том, что с jQuery.Mobile, элемент, который осуществляется путем изменения пользовательского интерфейса не является входным элементом. На самом деле, радиоэлемент фактически не нажимается. Элемент, который нажат, - <div class="ui-radio">. Если вы хотите привязываться к самому радиовходу, вам нужно использовать событие change, но в этом случае он не сработает для вас, потому что функция вызывается после того, как изменение уже было выполнено.

Что вам нужно что-то вроде этого:

// 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(); 
     } 
    }) 

event.stopImmediatePropagation() предотвращает в .ui-radio от запуска события нажатия на вход, и event.preventDefault предотвращает действие по умолчанию. stopImmediatePropagation может не понадобиться, но он дает дополнительную гарантию, которая может быть полезна для разных браузеров.