为什么我的模态在单击添加区域按钮时没有关闭答案

【问题标题】：why my modal is not closing on clicking add area button为什么我的模态在单击添加区域按钮时没有关闭
【发布时间】：2020-09-24 15:52:54
【问题描述】：

单击添加区域按钮时，我的模态应该关闭，但它不起作用。一切看起来都很好，但我找不到错误。 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>

java脚本

$('.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');
        }
      });
    }
  });

【问题讨论】：

不确定我是否理解，但您的最后一行 $("#category-popup").modal('hide');据我所知，.modal 不是公认的 js 属性。如果你只是想在 #catagory-popup 上使用 jQuery .hide() 方法，只需输入 $("#category-popup").hide();
@Gulli 他所做的是正确的。 .modal 来自 bootstrap.js 阅读：getbootstrap.com/docs/4.5/components/modal/#modalhide

标签： javascript php ajax laravel

【解决方案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);
    }
});

【讨论】：

【解决方案2】：

检查cnsole中的错误，它在选项字段中提交区域但未关闭

【讨论】：

【解决方案3】：

嗯，奇怪，你确定你正确地包含了 jQuery 吗？你能展示你包含的脚本吗？
jQuery 应该是这样的：<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

在 JavaScript 中，一个错误会导致整个脚本中断。如果没有 jQuery，您的“模态”操作将无法工作。我认为这是您的脚本无法正常工作的原因。

【讨论】：