jQuery 更改在 bootstrap 5 选项卡中不起作用答案

【问题标题】：jQuery change doesn't work in bootstrap 5 tabsjQuery 更改在 bootstrap 5 选项卡中不起作用
【发布时间】：2022-02-06 16:52:35
【问题描述】：

我在bootstrap 5 标签中添加了一个input 表单，如下所示：

<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-auto">
      <ul class="nav bg-dark">
        <li class="nav-item">
          <a class="nav-link link-secondary" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-secondary" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-secondary active" id="album-tab" data-bs-toggle="tab" data-bs-target="#album" href="#">ALBUM</a>
        </li>
      </ul>

      <div class="tab-content" id="tabContent">
        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
          <img class="img-fluid" src="https://fakeimg.pl/800x300/?text=home" />
        </div>
        <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
          <img class="img-fluid" src="https://fakeimg.pl/800x300/?text=about" />
        </div>
        <div class="tab-pane fade show active" id="album" role="tabpanel" aria-labelledby="album-tab">
          <input id="searchDateFrom" type="text" class="form-control search-by-date" data-name="searchDateFrom">
          <img class="img-fluid" src="https://fakeimg.pl/800x300/?text=album" />
        </div>
      </div>
    </div>
  </div>
</div>

Js：

var dateFrom = $('#searchDateFrom').val();
$('#searchDateFrom').change(function() {
  console.log(dateFrom);
});

现在，在操作中，我需要使用 jQuery change 方法获取输入值。但是，更改值后，我看不到任何结果。（into console log 以防万一）

我该如何解决这个问题？！

演示Here

图片：

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-5

【解决方案1】：

问题是，您不会在更改时刷新变量“dateFrom”的值。

dateFrom 保持其初始值，即 ""。在更改时，它会记录此值。

您应该将代码更改为：

var dateFrom;
$('#searchDateFrom').change(function() {
  dateFrom = $('#searchDateFrom').val();
  console.log(dateFrom);
});

这将在更改时更新变量的值并在之后记录它。

【讨论】：