jQuery UI Modal Destroy Form提交

Question

即使我銷毀了模態然后再次重新打開，表單也被提交了多次。

盡管在模式中僅包含一種形式：

請幫助防止/僅在對話框中提交一種表單！

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;
});

Answer 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 
     }
    });
  })
});