如api.jquery所述，
.submit()方法是第一个变体中.on( "submit", handler )和第三个变体中.trigger( "submit" )的快捷方式。
所以两个构造的行为应该是相同的。
此外，您将submit事件从#add_product委托给document，这是因为它现在必须侦听文档中的所有提交事件，因此性能较低。
也许由于事件委托，您可能在代码中的某个地方有一个e.stopPropagation，它会阻止事件自然冒泡到文档，因此不会执行处理程序。
如果可能的话，稍微限制一下范围比听文档要好得多。
尝试以下操作：

$(document).ready(function(){
        $('#add_product').on('submit', function(e) {
        e.preventDefault();
        $.post('script/test.php',
            {naam: $('#naam').val()})
            .done(function(response){
                bootbox.alert(response);
                parent.fadeOut('slow');
            })
            .fail(function(){
                bootbox.alert('error');
            })
    });
});

尝试在你的处理程序中添加'return false'：

$(document).on('submit','#add_product',function(e){
        e.preventDefault();
        $.post('script/test.php',
            {naam: $('#naam').val()})
            .done(function(response){
                bootbox.alert(response);
                parent.fadeOut('slow');
            })
            .fail(function(){
                bootbox.alert('error');
            })
        return false;
    });

尝试以下操作：

$(document).ready(function() {
    $('#add_product').on('submit', function(e) {
        e.preventDefault();
        $.post('script/test.php', { naam: $('#naam').val() })
            .done(function(response) {
                bootbox.alert(response);
                parent.fadeOut('slow');
            })
            .fail(function() {
                bootbox.alert('error');
            })
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="add_product" method="post">
                <div class="modal-body">
                    <div class="header add_product">
                        <div class="form-group">
                            <label class="control-label">Productnaam*</label>
                            <input maxlength="250" id="naam" type="text" required="required"
                                   class="form-control" name="naam"/>
                        </div>
                    </div>
                        <hr/>
             
                <div class="modal-footer ">
                    <button class="btn btn-success completeBtn btn-lg" name="submit"
                            type="submit" style="width: 100%;">
                        <span class="glyphicon glyphicon-ok-sign"></span> Toevoegen
                    </button>
                </div>
                </form>