jQuery UI 模态销毁表单提交答案

【问题标题】：jQuery UI Modal Destroy Form SubmitjQuery UI 模态销毁表单提交
【发布时间】：2015-01-26 02:12:54
【问题描述】：

即使我破坏了模式然后再次重新打开，表单也会多次提交。

虽然在modal中只包含一种形式：

请帮助如何防止/提交对话框上的一个表单！

HTML：

<a href="modal.php" class="mymodal" title="Submit Form">Open Modal</a>

Modal.php 文件

<form id="myform" role="form">

<div><label>Username:</label> <input type="text" name="uname"></div>
<div><label>Message:</label> <input type="text" name="message"></div>
<div><input type="submit" name="submit"></div>

</form>

JS：

$('body').on('click','.mymodal', function(e){

  var $this = $(this); 
  var output = $('<div id="uimodal-output" title="'+$this.prop('title')+'"></div>');
  $('body').append(output);

  output.load( $this.attr('href'), null, function() {
    output.dialog({
      modal: true,
      width:'auto',
      position: 'center',
      close: function(event, ui) {
         $(this).dialog('destroy').remove();
         $('#uimodal-output').dialog('destroy').remove(); // destroy all 
      }
    });
  })

});

$('body').on('click','#myform', function(e){

   $.ajax({
   });

   return false;
});

【问题讨论】：

第二次点击方式（对于表单来说，就是包含ajax的那个）是什么？

标签： javascript jquery forms jquery-ui

【解决方案1】：

我认为这个问题是因为您单击具有有效href 的锚点来打开模型。所以它会跟随href。

使用event.preventDefault() 阻止<a> 的默认操作：

$('body').on('click','.mymodal', function(e){

  e.preventDefault(); // add this

  var $this = $(this); 
  var output = $('<div id="uimodal-output" title="'+$this.prop('title')+'"></div>');
  $('body').append(output);
  output.load( $this.attr('href'), null, function() {
    output.dialog({
      modal: true,
      width:'auto',
      position: 'center',
      close: function(event, ui) {
       $(this).dialog('destroy').remove();
       $('#uimodal-output').dialog('destroy').remove(); // destroy all 
     }
    });
  })
});

【讨论】：