如何关闭模态框时清空modal-body内容？附jQuery未定义问题排查

我来帮你一步步搞定这两个头疼的问题：

1. 先解决Uncaught ReferenceError: $ is not defined报错 #

这个报错主要是三个小问题导致的：

• jQuery加载顺序错误：确保你的jQuery 3.2.1库是在所有自定义脚本之前加载的，比如把引入jQuery的<script>标签放在<head>里，或者页面最上方的位置，保证你的自定义JS代码执行时，jQuery已经加载完成。
• 选择器写错了：你绑定模态框隐藏事件时用了$('.exampleModal')，但你的模态框只有id="exampleModal"，没有这个类名，应该用id选择器$('#exampleModal')。
• jQuery方法用错：jQuery里没有clear()方法，清空元素内容要用empty()或者html('')，前者清空所有子元素，后者直接把内容替换为空。

2. 解决模态框内容重复的问题 #

你现在用append()方法会把新内容追加到旧内容后面，自然会重复，有两种简单的解决思路：

思路一：直接替换内容而非追加 #

把$('.modal-body').append(...)改成$('.modal-body').html(...)，这样每次计算后都会用新内容完全覆盖旧内容，不会有重复：

function calculator() {
  let income = document.getElementById("income").value;
  // 先判断输入是否有效，避免出现NaN的情况
  if (isNaN(income) || income === '') {
    $('.modal-body').html("Please enter a valid number.");
    return;
  }
  let payment = ((income - 18210)*0.1)/12;
  payment = Math.round(payment);
  if (payment <= 0) {
    $('.modal-body').html("$0 per month.");
  } else {
    $('.modal-body').html(payment + " or less per month.");
  }
}

思路二：关闭模态框时清空内容 #

在模态框隐藏的时候自动清空modal-body的内容，同时清空输入框，提升用户体验：

$(document).ready(function() {
  $('#exampleModal').on('hidden.bs.modal', function () {
    $('.modal-body').empty();
    document.getElementById("income").value = '';
  });
});

修改后的完整代码 #

我把所有问题都修复好了，你可以直接复制使用：

<!-- Form -->
<form onsubmit="return false">
  <!-- Heading -->
  <h3 class="dark-grey-text text-center">
    <strong>Calculate your payment:</strong>
  </h3>
  <hr>
  <div class="md-form">
    <i class="fa fa-money prefix grey-text"></i>
    <input type="text" id="income" class="form-control">
    <label for="income">Your income</label>
  </div>
  <div class="text-center">
    <button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
    <script type='text/javascript'>
      function calculator() {
        let income = document.getElementById("income").value;
        if (isNaN(income) || income === '') {
          $('.modal-body').html("Please enter a valid number.");
          return;
        }
        let payment = ((income - 18210)*0.1)/12;
        payment = Math.round(payment);
        if (payment <= 0) {
          $('.modal-body').html("$0 per month.");
        } else {
          $('.modal-body').html(payment + " or less per month.");
        }
      }
    </script>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div id="test" class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Clear content from modal -->
    <script type="text/javascript">
      $(document).ready(function() {
        $('#exampleModal').on('hidden.bs.modal', function () {
          $('.modal-body').empty();
          document.getElementById("income").value = '';
        });
      });
    </script>
    <hr>
    <label class="grey-text">* This is just an estimate. Please call for a quote.</label>
  </div>
</form>
<!-- Form -->

内容的提问来源于stack exchange，提问作者Foxhole