Twitter Bootstrap 模式中的 onsubmit 不会被触发

Question

代码很简单：

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 键和取消按钮应该关闭模式
• 输入键和提交按钮应该提交表单（显示警报），然后关闭模式

?

Answer 1

请不要使用onsubmit，你在提交按钮上做错了，你应该删除data-dismiss="modal"。那么提交时没有调用事件的功能，所以添加代码

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

    alert('444');

});

Updated Fiddle