Reconnecting multiple Ajax.BeginForms when dynamically loading the forms

Question

I have a long form made up of multiple sections, each with its own questions. Each section can be saved independently with an <input type="submit" value="Save" /> button.

Each section is loaded dynamically into the page (and there are a variable number of sections).

Each form is authored separately as an Ajax.Begin() ajax form, but with dynamic loading of the forms it appears UnobstrusiveJavaScript will not bind the submit buttons and they perform a standard postback.

What is the simplest way to reconnect the ajax functionality of the submit buttons?

Answer 1

After checking the source of UnobstrusiveJavaScript (which is quite small) it leaves permanent event handlers using .on('submit') so it should just work with dynamically loaded pages.

Turns out the master form was missing the inclusion of UnobstrusiveJavaScript:

@Scripts.Render("~/bundles/jqueryval")

Worth checking fiddler when this sort of thing occurs :)