取消MVC表单提交

我正在使用AJAX提交表单。字段位于被发送到控制器动作的局部视图中。局部视图位于一个div中，当单击主表单上的按钮时，该div会弹出。如果用户完成表单并单击提交按钮，那么更新将在控制器操作中执行，一切正常。但是，如果用户改变了主意，我喜欢添加一个取消按钮来隐藏表单。添加按钮和隐藏表单按预期工作，但是对控制器动作方法的调用仍然发生。我试过使用

e.preventDefault();

但是这行不通。

我已经尝试使用第二个JQuery方法附加到取消id，但我不能得到这个工作。

我的JQuery是这样的:

$('#VisitorModal').on('submit', '#visitorform', function (e) {
    var data = $(this).serialize();
    var url = '@Url.Action("CreateVisitor", "Meetings")';
    var text = $('#title').val() + ' ' + $('#firstname').val() + ' ' + $('#surname').val() + ' (' + $('#company').val() + ')'; // a value from the form that you want as the option text
    $.post(url, data, function (response) {
        if (response) {
            $('#VisitorID').append($('<option></option>').val(response).text(text)).val(response);
        } else {
            dialog.hide();
        }
    }).fail(function () {
        dialog.hide();
    });
    dialog.hide();
    e.preventDefault();
    //return false; // cancel the default submit
});
$('#cancel').on('click', function () {
    dialog.hide();
});

这是我的动作方法:

[HttpPost]
public JsonResult CreateVisitor(AppointmentViewModel model)
{
    var visitor = new Visitor()
    {
        Title = model.VisitorTitle,
        FirstName = model.VisitorFirstName,
        LastName = model.VisitorSurname,
        Company = model.VisitorCompany
    };
    db.Visitors.Add(visitor);
    db.SaveChanges();
    return Json(visitor.id);
}

并提交&取消按钮:

<div class="form-group">
    <div class="col-md-offset-2 col-md-5">
        <input type="submit" value="Create" class="btn btn-success" id="submit" />
        <input type="button" value="Cancel" class="btn btn-warning" id="cancel" />
    </div>
</div>

有没有人有任何建议，可能得到这个工作，因为我希望?

$('#cancel').on('click', function () {
    dialog.hide();
});

$(document).on('click', '#cancel', function () {
    dialog.hide();
});