Stop user from navigating away after entering data on form elements loaded via ajax
<p>I have a form that has it's elements loaded via Ajax in the following html structure.</p>

<pre><code>&lt;div id="form-wrapper"&gt;&lt;form id="myform" action="#" method="post"&gt;

//form elements loaded via ajax.

&lt;/form&gt;&lt;/div&gt;
</code></pre>

<p>I am using the following code to display a warning message when user navigates away from the page with unsaved data on it. This does not work.</p>

<pre><code>function confirm_page_unload(on) {
window.onbeforeunload = (on) ? confirm_page_navigate_dialog : null;
}
function confirm_page_navigate_dialog() {
return 'You have entered data on the current page. Navigating away without first   saving your data will result in all changes to be lost.';
}
jQuery('#myform:input').on('change', '#form-wrapper', function() { confirm_page_unload(true); });
</code></pre>

<p>It appears to me that the issue pertains to the form elements being loaded via ajax. How can I get this to work. I am using jQuery 1.7, hence I have used on().</p>

<p>Regards,
John</p>
