Javascript .click() 回调函数显然没有在 Bootstrap 手风琴中调用？

Question

我正在更新一个位于 www.peek.solutions 的静态网站，其中包含 Bootstrap accordion。我正在一个分支（https://github.com/khpeek/peek-solutions/tree/accordion-chevrons）上工作，在该分支中，我试图将向上/向下指向的 V 形符号添加到每个列表项，这些列表项根据它是否扩展而切换。我正在使用 Material Design 图标（参见@​​987654323@）。

作为解决方案的第一次尝试，我正在尝试查看是否可以更改一个图标的外观。我试图在下面的 sn-p 中说明它，但不幸的是，除非您下载字体，否则图标不会呈现（可以通过在链接存储库中运行 npm install 来完成）。

但基本上，问题似乎在于 $('#accordion button).click() 的回调函数没有被调用，因为如果我在该函数的主体中设置 debugger; 跟踪，它不会在我的浏览器中暂停。

知道为什么这个函数没有被调用吗？

$(document).ready(function(){
    $("#accordion button").click(function(){
        $("#accordion button .mdi").removeClass("mdi-chevron-up");
        $("#accordion button .mdi").removeClass("mdi-chevron-down");
    });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
 
   <div id="accordion">

 <div class="card border-bottom-0">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="mdi mdi-chevron-up float-right"></i>
            <span>Pipeline Integrity Assessment and Design</span>
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

更新

从控制台中的实验看来，在材质图标上调用.removeClass() 并不会删除它的类：

如您所见，即使在我尝试删除它之后，它仍然是 'mdi-chevron-up' 类。这可能是图标没有变化的原因吗？

Answer 1

使用.on('click',function(){});:http://api.jquery.com/on/

$(document).ready(function(){
    $("#accordion button").on('click',function(){
        $("#accordion button .mdi").removeClass("mdi-chevron-up");
        $("#accordion button .mdi").removeClass("mdi-chevron-down");
    });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
 
   <div id="accordion">

 <div class="card border-bottom-0">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="mdi mdi-chevron-up float-right"></i>
            <span>Pipeline Integrity Assessment and Design</span>
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>