javascript - jQuery Mobile click 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 更改影响的元素不是输入元素。事实上，radio 元素实际上根本没有被点击。单击的元素是 <div class="ui-radio"> .如果你想绑定(bind)到 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可能不是必需的，但它提供了额外的保证，可能对不同的浏览器有帮助。