Question

I have a single page mark-up with popup divs that contain forms that the user can use to update his/her account information. After form submission the popup closes and the page refreshes showing the updated information that is located within a li (this seems to be working). The problem is, if the user goes back and tries to update again the button within the popup is not submitting.

Thanks in advance for any suggestions!!!

Javascript

$('#updateadmin').click(function() {
var admin = $('#adminform').serializeArray();
/*alert(admin);*/
$.ajax({
type: "POST",
url: 'adminupdate.php',
data: admin,
success: function(data) {
            if(data=="success") {
                $('#admindiv').popup('close');
                $.mobile.changePage('companyinfo.php', { 
                    allowSamePageTransition: true,
                    transition: 'none',
                    reloadPage: true,
                    changeHash: false
                });
            } else {
                $('#adminupdatestatus').html(data).css({color: "red"}).fadeIn(1000);
            }
         }
});
return false;
});

Answer 1

It sounds like the #updateadmin link/button is located on the page that gets reloaded, if this is the case then you should delegate your event handler so it affects matching elements in the DOM for all time, not just when the code runs.

You would change this:

$('#updateadmin').click(function() {

to this:

$(document).on("click", "#updateadmin", function() {

This works because you’re now attaching the event handler to the document element which always exists. When events reach the document element they are checked to see if the element on which they originally fired matches the selector we put as the second argument for .on().

Documentation for .on(): http://api.jquery.com/on