Jquery 如何添加一个具有焦点的类并单击，但不让函数运行两次？

我对jQuery和自学是相当陌生的。下面您将看到我正在处理的代码和包含的JSFIDLE

我想做的是，当我关注输入/选择时添加一个类，当我单击父div时也添加该类。我基本上让它工作，但有两个单独的函数

问题：

当我单击输入时，它会添加类，但当我单击父div时，它会运行另一个函数，反之亦然

可能的解决方案：

将所有内容合并为一个函数

比如说，如果类存在，就不要运行其他函数

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

HTML

jQuery

---

您可以尝试以下方法：

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

第二个功能

这样可以防止单击事件“冒泡”DOM。因此，它现在永远不会到达父div来触发您的第一个函数

---

哪个函数运行了两次？我不清楚你的问题。所以转到JSFIDLE，单击第一个输入，然后单击父div，或者反之亦然。哇，快，容易，喜欢它。谢谢你知道有没有其他方法可以做到这一点，比如将两个函数合并为一个？@user262430没有。两个函数都有两个不同的用途。顺便说一下，HTML中没有任何

select

元素。您应该从jQuery代码中删除它。@user262430是可能的，但我不建议这样做。我不知道是否有不必要的一面-effects@RahulDesai谢谢感谢您的帮助和解释。

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

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

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

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

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

$(document).ready(function () {

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

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

});