2014-09-06 69 views
1

代碼很簡單:的onsubmit不會被觸發

HTML:

<div class="modal dialog-add-category fade" role="dialog" aria-labelledby="dialogAddCategoryLabel"> 
    <form onsubmit='alert("444")'> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 id="dialogAddCategoryLabel" class="modal-title">Add a category</h4> 
       </div> 
       <div class="modal-body"> 
        <input type="text" name="category_name" placeholder="Category name"/> 
        <div class="parent-category-tree"></div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <button type="submit" class="btn btn-primary" data-dismiss="modal">Create</button> 
       </div> 
      </div> 
     </div> 
    </form> 
</div> 

JS:

$(function() { 
    $('.dialog-add-category').modal('show'); 
}); 

這裏的真人版:http://jsfiddle.net/ygbhousz/1/

正如你所看到的,表單有onsubmit事件,但它不會被觸發。爲什麼會發生,我能做些什麼來實現這些目標:

  • Esc鍵和取消按鈕應關閉模式
  • 回車鍵提交按鈕應提交表單(顯示警報),然後關閉modal

+0

它可能是引導正在吞噬其他事件。你有沒有嘗試過使用普通按鈕並添加自定義提交功能?如果您希望該對話框關閉AFTER提交成功,那麼無論如何您都需要更多的定製工作。 – 2014-09-06 17:20:24

回答

0

請不要使用onsubmit,您在提交按鈕上犯了錯誤,您應該刪除data-dismiss="modal"。再有就是召集關於提交事件沒有功能,因此添加代碼

$(document).on('click', '[type="submit"]', function() { 

    alert('444'); 

}); 

Updated Fiddle

+0

好的。但我只是添加了'返回false';'並在處理結束後停止提交表單,現在它完美地工作。謝謝! – z2014 2014-09-06 19:15:32

+0

@ z2014你可以做一些類似「return confirm('For real?')」的提交或放棄表單,這取決於用戶的反饋。 – 2014-12-18 18:53:32