js/jquery从输入文本中获取值，返回“空字符串”

Question

在获取输入类型的文本时，我面临一个问题。

输入位于滑动块中，每个幻灯片都被ajax调用以获得适当的模板，每个幻灯片都有输入，我需要得到这些输入的值。

它适用于无线电或复选框，因为该值是在html中设置的，但当用户键入值时则不适用于文本。

下面是带有文本字段的模板的html

我还尝试使用本机js和其他事件(change，keyup)，这就像我无法读取文本字段的值一样。

​

$(document).on('click', '.swiper-button-next', function() {
  console.log($('#surface-checked-4').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="swiper-slide">
  <div class="multistep__content">
    <div class="value-multistep">
      <h2 class="title title-huge value-question">Quelle surface&nbsp;?</h2>
      <div class="value-input form__input-wrapper form__input-wrapper--value">
        <div class="input" id="input-surface-4">
          <input id="surface-checked-4" type="text" name="surface-habitable" placeholder="Surface habitable" class="form__input input__field get-value" value="" />
          <label for="surface-checked-4" class="form__label input__label">Surface habitable</label>
          <p class="form__error" id="surface-4"></p>
          <span class="input__unit">m<sup>2</sup></span>
          <button class="swiper-button-next">Next</button>
        </div>
      </div>
      <div class="value-help">
        <i class="value-help__icon icon-info"></i>
        <p class="value-help__text">
          <strong>Surface habitable</strong> Prendre en compte la surface de plancher construite dont les hauteurs sous-plafond sont supérieures à 1,80m (= surface Carrez). Les garages, celliers, abris de jardin... sont à exclure.
        </p>
      </div>
    </div>
  </div>
</div>

​

Answer 1

您的代码一定有问题。我试过这个和它的工作。请检查下面。点击next按钮试一试

​

  $(document).on('click', '.swiper-button-next', function () {
    alert($('#surface-checked-4').val())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-slide">
    <div class="multistep__content">
        <div class="value-multistep">
            <h2 class="title title-huge value-question">Quelle surface&nbsp;?</h2>
            <div class="value-input form__input-wrapper form__input-wrapper--value">
                <div class="input" id="input-surface-4">
                    <input id="surface-checked-4" type="text" name="surface-habitable" placeholder="Surface habitable" class="form__input input__field get-value" value="" />
                    <label for="surface-checked-4" class="form__label input__label">Surface habitable</label>
<button class="swiper-button-next">Next</button>
                    <p class="form__error" id="surface-4"></p>
                    <span class="input__unit">m<sup>2</sup></span>
                </div>
            </div>
            <div class="value-help">
                <i class="value-help__icon icon-info"></i>
                <p class="value-help__text">
                    <strong>Surface habitable</strong>
                    Prendre en compte la surface de plancher construite dont les hauteurs sous-plafond sont supérieures à 1,80m (= surface Carrez). Les garages, celliers, abris de jardin... sont à exclure.
                </p>                    
            </div>
        </div>
    </div>
</div>

​