javascript - 单击对话框中动态元素上的事件

我有一个jQuery对话框，它打开时正在加载一个小表单。此窗体中有一个按钮<input type="submit" class="cancel" value="" />。单击此按钮时，我希望关闭jQuery对话框。
以下是我所拥有的：

$('#dialog').dialog({
    autoOpen: false,
    modal: true,
    open: function (event, ui) {
        $(this).load("@Url.Action("Create")");
    }
});


$('input.cancel').on('click', function (e) {
    e.preventDefault();

    alert("hello");
    //$("#dialog").dialog('close');
});

但点击我的取消按钮，它只是重新加载整个页面。即使我将其更改为警报，它仍然只是重新加载整个页面。
我在这里做错什么了吗？我以为on会附加到动态元素，而e.preventDefault()会阻止它提交表单。

最佳答案

将类型从type="submit"更改为type="button"

<input type="button" class="cancel" value="" />