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

Question

我有一个 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()将阻止它提交表单。

Answer 1

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

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