CODEWITHSUNDEEP
javascriptjqueryhtml
Steven
Steven

Reputation: 18859

Click event on dynamic element in dialog

I have a jQuery dialog, that's loading a small form when it opens. There is a button in this form <input type="submit" class="cancel" value="" />. When this is clicked, I'd like the jQuery dialog to close.

Here's what I have:

$('#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');
});

But clicking on my Cancel button, it just reloads the entire page. Even if I change it to an alert, it still just reloads the entire page.

Am I doing something wrong here? I thought on would attach to a dynamic element, and e.preventDefault() would stop it from submitting the form.

Upvotes: 2

Views: 74

Answers (1)

zzlalani
zzlalani

Reputation: 24364

change the type from type="submit" to type="button"

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

Upvotes: 3

Related Questions