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

Question

我在获取输入类型文本时遇到问题。

输入在 swiper 支持的 slider 中，每张幻灯片都用 ajax 调用以获得正确的模板，每张幻灯片都有输入，我需要获取这些输入的值。

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

这是带有文本字段的模板的 html

我还尝试了原生 js 和其他事件（更改、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

你的代码一定有问题。 我试过这个及其工作。 请检查以下。 尝试单击下一步按钮

 $(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>