javascript - 使用 jQuery src 链接添加到页脚时，jQuery 不起作用

Question

我制作了一个表单来添加产品，其中我根据单选按钮的值显示不同的输入。但是当我在页脚中添加 jquery script 标签时，我的脚本。但是当我在脚本的同一页面上使用 CDN 时，我的表单出奇地有效！知道为什么吗？我正在使用 PHP 作为后端谢谢 :)

  <!-- Sticky Footer -->
    <div class="container">
      <div class="copyright">
        &copy; Copyright <strong>Bitcoinerrs</strong>. All Rights Reserved
      </div>
    </div>
  </footer>  

  <script src="vendor/js/jquery.min.js"></script>
  <script src="vendor/js/popper.min.js"></script>
  <script src="vendor/js/bootstrap.min.js"></script>

</body>

</html>

我的脚本页面

  <h4 class="mb-3">Trade Type*</h4>   

  <div class="d-block my-3">
    <div class="custom-control custom-radio">
      <input id="sell" name="tradeType" type="radio" value="sell" class="custom-control-input options-switch" checked="" required="">
      <label class="custom-control-label" for="sell">Sell online</label>
    </div>
    <div class="custom-control custom-radio">
      <input id="buy" name="tradeType" type="radio" value="buy" class="custom-control-input options-switch" required="">
      <label class="custom-control-label" for="buy">Buy online</label>
    </div>
  </div>              

    <div class="options options-sell active">
      <h4 class="mb-3">Online selling options</h4>

      <div class="mb-3">
        <label for="payment_details">Payment details</label>
        <textarea name="payment_details" class="form-control" cols="40" rows="4"></textarea>
      </div>

      <div class="row">
        <div class="col mb-3">
          <label for="new_buyers_limit">New buyer limit</label>
          <input type="number" class="form-control" name="new_buyer_limit">
        </div>
        <div class="col mb-3">
          <label for="min_feedback_scores">Minimum feedback score</label>
          <input type="number" class="form-control" name="min_feedback_score">
        </div>              
      </div>
     </div> <!-- sell_online_options -->

    <div class="options options-buy">
    <h4 class="mb-3">Online buying options</h4>

    <div class="row">
      <div class="col mb-3">
        <label for="payment_window">Payment window</label>
        <div class="input-group-prepend">
          <input type="number" name="payment_window" class="form-control">
          <span class="input-group-text">minutes</span>
        </div>
      </div>              
    </div>
  </div> <!-- buy_online_options -->        
  <hr class="mb-3">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.options-switch').on('change', function() {
$('.options').removeClass('active');
var optionsToShow = '.options-' + $(this).attr('id');
$(optionsToShow).addClass('active');
});
});  
</script>      

</section>

标签： javascriptjqueryhtml