Javascript stops working after ajax submit

Javascript stops working after ajax submit

I've got a page that loads a php file inside a div using load(). Inside the ajax-loaded page there's a button which will load a second php file in the same div. This works fine and on the second div a form will be loaded. Inside this form I've got an info button (after the e-mail address field). Clicking this button will open a dialog, using the UI dialog. So far so good, everything works fine. Even after clicking back in the form page and clicking the button on the index page.

The problem appears after submitting the form. This will trigger a javascript function which will post the form using $.ajax(). The response json data will be handled. If an error occured, some error messages will be set without reloading the form. If the form is ok, the user will be returned to the index page, using the load() function.
The problem is that (after clicking on the button on the index to load the form again) the info button isn't working anymore. Can someone tell me what I'm doing wrong here?

Form page code:
  1. $(function(){
  2.     $("#email-info").dialog({
  3.         autoOpen: false,
  4.         width:400,
  5.         modal:true
  6.     });
  7.     $('#popup-trigger').click(function(e){
  8.         e.preventDefault();
  9.         $('#email-info').dialog('open');
  10.     });
  11.     $('#edit').ajaxform({
            // options
        });


  12. });
  1. <form action="filename.php" method="post" name="edit" id="edit" enctype="multipart/form-data">
  2.     <!-- fields come here -->
  3. </form>
  4. <div id="email-info" title="Info">
  5.     <p>Popup content here.</p>
  6. </div>

The ajaxform function is defined in a .js file which handle form data. It's too much code to post here, but the ajax function looks like this:
  1. ;(function($) {
  2.     $.fn.ajaxform = function(options) {
  3.         var form = $(this);
  4.         var container = $(options.container);
  5.         form.submit(function(){
  6.             form.css('opacity',0.5);
  7.             $(":submit").attr('disabled', 'disabled').addClass('disabled');
  8.             container.addClass(options.loaderClass);
  9.             $('.' + options.error.class_name + ':not(#' + options.message_id + ' .' + options.error.class_name + ')').removeClass(options.error.class_name);
  10.             $('.' + options.error.message_class_name).remove();
  11.             $.ajax({
  12.                 type:'POST',
  13.                 url:form.attr('action'),
  14.                 data:$(this).serializeArray(),
  15.                 success:afterValidate,
  16.                 dataType:"json",
  17.                 complete:resizeContainer
  18.             });
  19.             return false;
  20.         });
  21.     }
  22. });








    • Topic Participants

    • mail