jQuery的AJAX形式Twitter的引導3.1模式

我使用Twitter的引導3.1遠程模式提交：jQuery的AJAX形式Twitter的引導3.1模式

<!-- Modal --> 
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <form action="remote.php" method="post"> 
     ... 
     </form> 
     <script type="text/javascript" src="js/bootstrap-modal.js"></script> 
     </div> 
    </div> 
    </div> 
</div>

通過鏈接推出：

<a data-toggle="modal" href="remote.php" data-target="#remoteModal">Click me</a>

正如你所看到的，bootstrap- modal.js腳本處理提交按鈕的形式爲：

$(document).ready(function() { 

    $('.modal-link').click(function(e) { 
     var target = $(this).attr('href'); 

     // load the url and show modal on success 
     $('#remoteModal .modal-content').load(target, function() { 
      $('#remoteModal').modal('show'); 
     }); 

     e.preventDefault(); 
    }); 

    $('.modal').on('submit', 'form[data-async]', function(e) { 
     var $form = $(this); 
     var enctype = $form.attr('id') 

     if(enctype == 'multipart') { 
      var formData = new FormData(this); 

      $.ajax({ 
       type: $form.attr('method'), 
       url: $form.attr('action'), 
       data: formData, 
       mimeType: "multipart/form-data", 
       contentType: false, 
       cache: false, 
       processData: false, 

       success: function(data, status) { 
        $('#remoteModal').removeData('bs.modal'); 
        $('#remoteModal .modal-content').html(data); 
       } 
      }); 
     } 
     else { 
      var submitButton = $("input[type='submit'][clicked=true], button[type='submit'][clicked=true]", $form); 
      var formData = $form.serializeArray(); 

      if(submitButton.size() === 1) { 
       formData.push({ name: $(submitButton[0]).attr("name"), value: "1" }); 
      } 
      else if(submitButton.size() !== 0) { 
       console.log("Weird, multiple submit-buttons pressed!"); 
      } 

      $.ajax({ 
       type: $form.attr('method'), 
       url: $form.attr('action'), 
       data: formData, 
       cache: false, 

       success: function(data, status) { 
        $('#remoteModal').removeData('bs.modal'); 
        $('#remoteModal .modal-content').html(data); 
       } 
      }); 
     } 

     e.preventDefault(); 
    }); 

    $('.modal').on("click", 'input[type="submit"], button[type="submit"]', function() { 
     $('form[data-async] input[type=submit], form[data-async] button[type=submit]', $(this).parents("form")).removeAttr("clicked"); 
     $(this).attr("clicked", "true"); 
    }); 
});

問題：

當第一次點擊表單的提交按鈕，但第二次點擊它，表單發佈兩次，第三次點擊它，三次等，它工作正常。

有什麼幫助嗎？

感謝奧利

來源

2014-03-05 user3384110

您需要取消綁定submit事件，這將可以發佈停止多次

$('.modal').unbind().on('submit', 'form[data-async]', function(e) {

來源

2014-03-07 00:06:02 Jimubao

非常感謝！但是你知道sumbmit事件可能來自哪裏嗎？ – user3384110

你是什麼意思？取決於你如何激發提交事件。你是否點擊任何自定義按鈕來提交表單？否則，默認的輸入類型提交將激發提交事件。 – Jimubao

在事件處理程序，檢查下列您繼續之前： if(event.isDefaultPrevented()) return;

由於jQuery的設計，阻止的事件也會傳遞給處理程序。

來源

2014-07-15 15:57:20 Birla

jQuery的AJAX形式Twitter的引導3.1模式

回答

相關問題