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

Twitter中的onsubmit Bootstrap模式没有被触发

1 个答案: