单击第一个输入后显示下一个输入（FORM）答案

【问题标题】：Reveal next Input after clicked first one (FORM)单击第一个输入后显示下一个输入（FORM）
【发布时间】：2021-07-07 11:15:15
【问题描述】：

我得到了一个如下所示的表单：

只有当用户点击了前一行中的输入时，我才想显示下一个输入行。为此，我编写了我的脚本，但它没有直接关注输入。因此，如果您在输入字段之外稍微点击一下，仍会显示下一行。

不幸的是，如果我只是将点击侦听器上的类更改为输入标签，它就不再工作了——就像它找不到下一行一样。

在我为每个元素硬编码类之前，有什么动态解决方案吗？

注意：（无法设置 codepen，因为它是一个 cms 并且不知道如何将所有合并的 css/js 和库导入到 codepen）

function revealNextRow() {
  $('.radio-toolbar').on('click', function() {
    $(this).next('.radio-toolbar').fadeIn();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML STRUCTURE for each input row

<form>
  <h3 class="text-center">HEADING </h3>
  <div class="radio-toolbar pb-4">
    <div class="row mt-4 mb-4">
      <div class="col-6 mb-1">
        <input type="radio" id="step1ja" name="step1" value="25" class="calc">
        <label for="step1ja" class="w-100">Ja</label>
      </div>
      <div class="col-6 mb-1">
        <input type="radio" id="step1nein" name="step1" value="0" class="calc">
        <label for="step1nein" class="w-100">Nein</label>
      </div>
    </div>
  </div>
  <div class="radio-toolbar mt-5 pb-4 hidden">
    <h3 class="text-center">Wie wohnen Sie?</h3>
    <div class="row mt-4 mb-4">
      <div class="col-sm-4 mb-1">
        ...
      </div>
    </div>
  </div>
</form>

【问题讨论】：

标签： jquery forms dynamic

【解决方案1】：

您不需要该功能。你需要从一开始就有事件监听器

$(function() { // on page load
  $('.radio-toolbar').on('click', 'input[type=radio]', function() {
    $(this).closest('.radio-toolbar').next().fadeIn();
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<form>
  <h3 class="text-center">HEADING </h3>
  <div class="radio-toolbar pb-4">
    <div class="row mt-4 mb-4">
      <div class="col-6 mb-1">
        <input type="radio" id="step1ja" name="step1" value="25" class="calc">
        <label for="step1ja" class="w-100">Ja</label>
      </div>
      <div class="col-6 mb-1">
        <input type="radio" id="step1nein" name="step1" value="0" class="calc">
        <label for="step1nein" class="w-100">Nein</label>
      </div>
    </div>
  </div>
  <div class="radio-toolbar mt-5 pb-4 hidden">
    <h3 class="text-center">Wie wohnen Sie?</h3>
    <div class="row mt-4 mb-4">
      <div class="col-6 mb-1">
        <input type="radio" id="step1ja" name="step1" value="25" class="calc">
        <label for="step1ja" class="w-100">Irgenwo</label>
      </div>
      <div class="col-6 mb-1">
        <input type="radio" id="step1nein" name="step1" value="0" class="calc">
        <label for="step1nein" class="w-100">Nirgendwo</label>
      </div>
    </div>
  </div>
</form>

【讨论】：

非常感谢 mplungjan！它解决了这个案子。我在“文档就绪”中实现了该功能，因此它被直接加载了。 - 这一行：.on('click', 'input[type=radio]', 解决了我的痛苦