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

Question

我在 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

图片：

Answer 1

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

dateFrom 保留其初始值，即“”。在更改时，它会记录此值。

您应该将代码更改为：

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

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

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

jQuery change doesn't work in bootstrap 5 tabs

javascript

jquery

twitter-bootstrap

bootstrap-5