Question

下面你将看到我正在处理的代码和一个包含的JSFiddle。

问题：

当我点击收音机或复选框时，会添加课程，但未选中收音机或复选框。

请解释一下代码，以便我可以从中学习。如果您没有解决方案，任何提示或方向也会有所帮助。提前谢谢！

HTML

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <select>
        <option>option</option>
    </select>
</div>

<div class="panel">
    <input type="radio"/>
</div>

<div class="panel">
    <input type="checkbox"/>
</div>

CSS

.panel{
    padding:15px;
    background:grey;
    margin-bottom:15px;
}

.panel-primary{
    margin:0 15px 0 15px;
    background:blue;
    margin-bottom:15px;
}

的jQuery

$(document).ready(function () {

$('.panel').click(function () {
    event.stopPropagation();
    $('.panel').removeClass('panel-primary');
    $(this).addClass('panel-primary');
});

$('input, select').bind('focus blur', function (event) {
    event.stopPropagation();
    $('.panel').removeClass('panel-primary');
    $(this).closest(".panel").addClass('panel-primary');
});

$('input[type=radio]').change(function () {
    event.stopPropagation();
    $('.panel').removeClass('panel-primary mrgn-lft-lg');
    $(this).closest(".panel").addClass('panel-primary');
});

});

Answer 1

与几乎所有其他答案所说的相反，问题不在于您使用event.stopPropagation();。唯一的问题是行$('input, select').bind('focus blur', function (event) {。

问题是，focus event is triggered prior to the click event，类panel-primary然后被应用于面板div，左边距将其移动到右侧，因此复选框或单选按钮不会＆＃ 39;收到点击事件。验证这一点的一种简单方法是更改CSS，使左边距不移动，或删除整个$('input, select').bind('focus blur', function (event) {块。

单击无线电时，会添加该类，但未选择无线电

1 个答案: