jquery - 在某些情况下，单击按钮标签不会触发输入单击

Question

我正在使用 jquery ui 按钮集作为一些单选按钮。据我了解，jquery ui 使标签看起来像一个按钮，而实际的 radio 本身隐藏在下面。当用户单击标签时，单击会传播到下面的输入。

我正在尝试触发设置为“更改”的单选按钮上的事件。大多数时候，这都可以正常工作。单击标签，下面的单选按钮会发生变化，并且事件会触发。但是，在某些情况下，会发生标签单击(这会导致按钮看起来像是当前已选中)，但单击/更改不会传播到下面的 radio 输入。这使得某个选项/单选按钮看起来像是被选中，但实际上并未被选中。

其中两种情况是:

1. 在 Chrome 中，当您“选择”按钮上标签的文本时。该按钮看起来已被选中，但其下方的单选按钮尚未被单击/更改。
2. 在 IE 中，当用户右键单击打开自定义上下文菜单时，然后单击菜单而不选择菜单中的任何内容，然后单击该按钮两次。同样，该按钮看起来已被选中，但其下方的单选按钮尚未被单击/更改。

我的解决方案是观察标签上的点击事件，当发生这种情况时，检查下面是否选中了 radio ，如果没有，则检查它并触发我想要在更改时触发的事件。基本上，始终强制将标签上的点击传播到输入。这适用于我上面提到的两种情况。

但是，我想知道是否有更好/更干净的方法来解决这个问题。

原始代码:

<div class="view-original-data nav-2nd-line">
    <input type="radio" id="view_current" name="view_original_data_options" value="current" checked="checked">
    <label for="view_current">Current Data</label>
    <input type="radio" id="view_original" name="view_original_data_options" value="original">
    <label for="view_original">Original Data</label>
</div>

脚本:

$viewOriginalDataButtons = $(".view-original-data")
        .buttonset()
        .on("change", my.handleOriginalDataOptionsClick);

修复对我有用的问题:

$viewOriginalDataButtons = $(".view-original-data")
        .buttonset();
$(".view-original-data label")
        .on("click", function () {
            var labelId = $(this).attr('for'),
                    $buttonClicked = $('#' + labelId);
            if (!$buttonClicked.prop('checked')) {
                $buttonClicked.prop('checked', true);
                my.handleOriginalDataOptionsClick($buttonClicked);
            }
        });

Answer 1

用标签包裹您的输入，这将解决您的问题。

<div class="view-original-data nav-2nd-line">
<!-- Like This one below-->
    <label for="view_current"><input type="radio" id="view_current" name="view_original_data_options" value="current" checked="checked">
    Current Data</label>        
</div>

<小时/>

更新:为什么这有效？让我们来看看

The "label" element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the "label" element, it toggles the control.

<小时/>

评论后编辑: jquery 论坛中存在一个问题，解决方案是该按钮集的刷新方法。您可以像这样使用它:

$("span.that_contains_your_radio_buttons").buttonset("refresh");

正如文档所述

Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programmatically.