javascript - 为什么我的模态没有在点击添加区域按钮时关闭

Question

单击添加区域按钮时，我的模式应该关闭，但它不起作用。一切看起来都很好，但我找不到错误。 id="category-popup"应该通过 $("#category-popup").modal('hide'); 关闭模态但它不起作用有人可以帮助我吗？

 <div class="modal fade" id="category-popup" tabindex="-1" role="dialog" aria-labelledby="category- 
   popup" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Add Area</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <form method="post" action="{{ route("save.area.ajax") }}" class="category-form">
              {{ csrf_field() }}
              <div class="form-group">
                <label>Area Name</label>
                <input type="text" name="name" class="form-control old-category" required="">
              </div>
              <div class="form-group">
                <button type="button" class="btn btn-primary btn-block add-area-submit-btn">Add 
                 Area</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

脚本

$('.add-category').click(function(event){
    event.preventDefault();
    $('.old-category').val('')
    $('.category-form').attr('action' , '{{ route("save.area.ajax") }}');
    $('#category-popup .modal-title').html('Add Area');
    $('#category-popup .modal-footer button').text('Add Area');
  });
  $(document).on('click', '.add-area-submit-btn', function(e){
    e.preventDefault();
    var btn = $(this);
    if($('.category-form .old-category').val() != ""){
      $.ajax({
        type: 'post',
        data: $('.category-form').serialize(),
        url: $('.category-form').attr('action'),
        success: function(res){
          $("#area-select").html(res);
          $("#category-popup").modal('hide');
        }
      });
    }
  });

Answer 1

隐藏模式的语法是正确的，但请确保您的 $.ajax 请求成功。尝试在 $.ajax 中执行 console.log() 成功。或者在你的 ajax 中添加错误，这样你就可以知道错误

$.ajax({
    type: 'post',
    data: $('.category-form').serialize(),
    url: $('.category-form').attr('action'),
    success: function(res) {
        console.log("ajax request success");
        $("#area-select").html(res);
        $("#category-popup").modal('hide');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log("ajax request failed: " + errorThrown);
    }
});