代码很简单:

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键和“取消”按钮应关闭模式
输入键和提交按钮应提交表单(显示警报),然后关闭模式


最佳答案

请不要使用onsubmit,您对“提交”按钮的操作有误,应删除data-dismiss="modal"。然后就没有在提交时调用事件的功能,因此添加代码

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

    alert('444');

});


Updated Fiddle

10-05 20:47
查看更多