Javascript JQUERY-单击后将CSS类添加到BUTTON元素

我想在单击按钮后永久更改其背景色。使用以下代码，颜色仅在按钮处于活动状态/被单击时更改。释放鼠标按钮后，添加的“clicked”类将不再应用于元素

将下面的代码应用于输入标记而不是按钮标记的方式符合我的需要。但是，我使用按钮标记，因为我希望值与按钮内的文本不同

我需要改变什么

--谢谢

 HTML
 <button class="inactive" value="test">Button</button>

 CSS
 .inactive {background-color:gray;}
 .clicked {background-color:orange;}

 JS
 $(document).ready(function(){
      $('button').click(function(){
           $(this).addClass('clicked');
      });
 );

HTML
按钮
CSS
.inactive{背景色：灰色；}
.单击{背景色：橙色；}
JS
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（this.addClass（'clicked'）；
});
);

---

应该可以。这将清除按钮上的旧类，并为其提供适当的

。单击
类。如果使用此解决方案后颜色重置，则问题出在代码的其他地方。
唯一的问题是缺少一个花括号：

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（this.addClass（'clicked'）；
});
})；//我无法复制您的问题：这在a中可以正常工作。我猜您还有其他未包含的CSS干扰了此jQuery。我发现了问题。button标记位于表单元素中，在单击时提交并重新加载页面。我没有意识到默认情况下提交的按钮。谢谢您你的帮助。
$('button.inactive').click(function() {
    $(this).removeClass('inactive').addClass('clicked');
});

 $(document).ready(function(){
      $('button').click(function(){
           $(this).addClass('clicked');
      });
 }); //<==here

$('button').mouseup(function() { 
    $(this).removeClass('clicked').addClass('inactive');
}