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

Question

我正在更新位于 www.peek.solutions 的静态网站，其中包含 Bootstrap accordion. I'm working on a branch (at https://github.com/khpeek/peek-solutions/tree/accordion-chevrons) in which I'm trying to add up/down-pointing chevrons to each list item which toggle according to whether it is expanded or not. I'm using Material Design icons (cf. https://materialdesignicons.com/bootstrap).

作为解决方案的第一个尝试，我正在尝试查看是否可以更改一个图标的外观。我试图在下面的片段中对其进行说明，但不幸的是，除非您下载字体（可以通过链接存储库中的运行 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>

更新

在控制台中进行的实验表明，在 material 图标上调用 .removeClass() 似乎不会删除其 class:

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

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>

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

Javascript .click() callback function apparently not called in Bootstrap accordion?

html

javascript

css

bootstrap-4

bootstrap-material-design