jQuery的click等方法正常但addClass、attr等修改属性方法不生效怎么办

问题描述 #

我在PHP/HTML项目中遇到了jQuery使用异常的问题：jQuery基础功能可以正常调用，但无法通过jQuery修改元素属性。
其中click、val、submit函数都可以正常运行，但addClass、removeClass、attr这三个方法完全不生效。

相关代码 #

JavaScript代码 #

$('#mVote').click(function() {
  alert("Vote");
  $("a.active").each(function() {
    $(this).removeClass("active");
  })
  $('#mVote').addClass("active");
  $('#mVote').attr("test", "test");
  $("#mMode").val("vote");
  $("#menu").submit();
})

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Abstimmung</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <form id="menu" method="POST">
        <input type="hidden" id="mMode" name="mode">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a id="mVote" class="nav-link mItem" aria-current="page" href="#">Abstimmung</a>
          </li>
          <li class="nav-item">
            <a id="mLogout" class="nav-link mItem" aria-current="page" href="#">Abmelden</a>
          </li>
          <li class="nav-item">
            <a id="mUser" class="nav-link mItem" aria-current="page" href="#">Benutzerdaten</a>
          </li>
          <li class="nav-item">
            <a id="mCharts" class="nav-link mItem" aria-current="page">Edit Charts</a>
          </li>
          <li class="nav-item">
            <a id="mUpdSong" class="nav-link mItem" aria-current="page">Update Song DB</a>
          </li>
          <li class="nav-item">
            <a id="mUpdImg" class="nav-link mItem " aria-current="page">Update Covers</a>
          </li>
          <li class="nav-item">
            <a id="mTest" class="nav-link mItem" aria-current="page">Test</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </form>
    </div>
  </div>
</nav>

环境说明 #

• Bootstrap版本：5.1.3
• jQuery版本：3.6.0
  上述三个不生效的方法在单独编写的小型测试程序中可以正常运行，请问可能是什么原因导致的该问题？

补充更新（问题已解决） #

已经找到问题根源：相关方法本身是正常运行的，但后续触发的submit提交POST请求会导致页面刷新，直接覆盖了之前的属性修改。因为PHP仅在服务端运行生成返回给客户端的HTML代码，后续通过POST参数来给当前激活的菜单项设置active类名即可解决该问题。 #

内容的提问来源于stack exchange，提问作者Georgio