Question

我在Twitter Bootstrap 3中使用button.js的单选按钮组件从分段控件中获取正确的值时遇到了问题。当我将click事件绑定到运行$ .serialize（）的分段控件时在父表单中，它返回单选按钮的未选中值以及来自其他输入的所有其他正确值。

我怀疑它可能与我无法将此事件直接绑定到分段控件的输入这一事实有关。当我试图将事件直接绑定到输入时，我没有得到回复，所以我将它绑定到标签。

以下是小提琴中问题的一个示例：https://jsfiddle.net/stevekas/9w94pL4o/

<form id="form">
    <div id="radios">
        <div class="radio">
            <label class="major-category">
                <input facet="exclusive" type="radio" name="hipsum" value="hashtag" />hashtag</label>
        </div>
        <div class="radio">
            <label class="major-category">
                <input facet="exclusive" type="radio" name="hipsum" value="farm-to-table" />farm-to-table</label>
        </div>
        <div class="radio">
            <label class="major-category">
                <input facet="exclusive" type="radio" name="hipsum" value="gastropub" />gastropub</label>
        </div>
    </div>
    <!--/ #radios -->
    <div id="segmented-control" class="btn-group btn-group-justified" data-toggle="buttons">
        <label class="btn btn-default active">
            <input type="radio" name="segmented-control" id="roof" value="roof" autocomplete="off" checked />roof</label>
        <label class="btn btn-default">
            <input type="radio" name="segmented-control" id="party" value="party" autocomplete="off" />party</label>
    </div>
    <!--/ #segmented-control -->
</form>


<script>
    $('.radio input').on('click', function () {
        var data = $('#form').serialize();
    });

    $('#segmented-control label').on('click', function () {
        var data = $('#form').serialize();
    });
</script>

Answer 1

可能是因为在输入的点击之前处理了标签的点击（DOM树中的标签更高）。

您可以强制调试在使用setTimeout（）处理完所有事件后调用，没有任何延迟，如下所示：

$('#segmented-control label').on('click', function () {
    setTimeout(function() {
        debug();
    }, 0);
});

这是有效的，因为setTimeout（）将一个新事件排入队列，该事件将在所有当前待处理事件之后运行。

将事件绑定到Bootstrap 3（button.js）按钮无线电的麻烦

1 个答案: