javascript - 模态内的表单不会使用 jQuery 提交

Question

我在 Bootstrap 模式中有一个表单，我想通过 Ajax 请求提交它。我一直密切关注this post 。由于某种原因，我无法实际提交表格。这是我的模式的 HTML。

<div id="modal-close" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Edit Introduction</h3>
</div>

<div class="modal-body">
 <form id="modal-form-close" method="post">
  <input type="hidden" name="event_timestamp" value="{{event.timestamp}}">
  <input type="hidden" name="event_desc" value="{{event.desc}}">
  <input type="hidden" name="status"  value="closed">
  <input type="text" name="resolution"  value="">
 </form>
</div>

<div class="modal-footer">
  <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  <button class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
</div>
</div>
</div>
</div>

这是我的 JavaScript:

<script>
$(function(){
$('#modal-form-close').on('submit', function(e){
  e.preventDefault();
  $.ajax({
          url: '/events/edit/{{event.event_id}}/script',
          data: $('#modal-form-close').serialize(),
          type: 'POST',
          success: function(data){
              alert('successfully submitted')},
          error: function(data){
              alert('something went wrong')
          }
     });
});
});
</script>

用这种方式编写的 JavaScript，当我按下提交表单时什么也没有发生。但是，如果我将函数更改为 .on('click')，事情就会按预期进行。我错过了什么？

Answer 1

找到答案here 。

我需要将“点击”操作连接回提交按钮。

$('button#submit').on('click', function(e){

并添加一个 id=submit 到提交按钮

<button id="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>

令人惊奇的是，您可以从堆栈溢出中获得复制粘贴代码的程度。