jQuery Mobile 클릭 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으로 상기 UI 변경함으로써 이루어진다 요소가 입력 요소 없다는 것이다. 실제로 라디오 요소는 실제로 클릭되지 않습니다. 클릭 된 요소는 <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은 필요하지 않을 수도 있지만 다른 브라우저에서 도움이 될 수있는 추가 보증을 제공합니다.