jQuery UI Dialog Event Listeners not working

Question

I have a page, which upon clicking a specific link a jQuery UI dialog is opened, works perfectly, in said dialog there is a form (a user registration form), and I need to attach a submit event handler on that form, but because it is loaded with AJAX in jQuery the event handler will not attach, my code is such as this:

$("#register").on("submit", false);

I just need to be able to cancel the form submission within the dialog and I cannot get it to work.

Since it's added via AJAX, you need to use .on() to bind to an existing page element. Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next. — j08691
– j08691, Commented Jun 22, 2012 at 15:15

Didier Ghys · Accepted Answer · 2012-06-22 15:28:59Z

1

If the form is loaded using ajax, you should attach the event after the form has been loaded and inserted in the DOM.

$('#dialog-container').load('url-to-the-form', function() {
    $('#register').on('submit', false);
});

Depending on how you load the form ($.ajax() - .load() ...), you might adapt the example below.

answered Jun 22, 2012 at 15:28

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

flaiks Over a year ago

well the form is loaded using .dialog() of jquery ui

Didier Ghys Over a year ago

I'm not aware of jquery dialog loading content via ajax... show some code maybe ?

Collectives™ on Stack Overflow

jQuery UI Dialog Event Listeners not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related