Second Ajax Submission Fails

[eluser]backtoeleven[/eluser]
I have created a simple contact form and I am having a problem when performing a second submission. What I mean by that is if validation fails, the form is presented with the validation errors but when the form is resubmitted I am not seeing the results I am expecting.

The form data is being submitted by ajax request to the controller. When validation fails the controller passes back the form to display the validation errors. When you come to submit the form again it just seems to follow the link as though the jQuery function is no longer catching the submit.

Does anyone know why this might be happening? I've had a google and not found anything to suggest why.

The relevant code is as follows...

The Form:

Code:

<?php echo form_open('contact/submit',array('id' => 'contactForm')); ?>
           <fieldset>
              <h2>Send Us A Message</h2>
              <div class="form-group">
                &lt;?php
                 echo form_label('Name', 'name');
        echo form_input(array('class'=>'required','id'=>'name','name'=>'name','value'=>set_value('name')));
        echo form_error('name', '<div class="error">', '</div>');
       ?&gt;
      </div>
              <div class="form-group">
                &lt;?php
                 echo form_label('Phone', 'phone');
        echo form_input(array('id'=>'phone','name'=>'phone','value'=>set_value('phone')));
       ?&gt;
      </div>    
              <div class="form-group">
                &lt;?php
                 echo form_label('Email', 'email');
        echo form_input(array('class'=>'required','id'=>'email','name'=>'email','value'=>set_value('email')));
        echo form_error('email', '<div class="error">', '</div>');
       ?&gt;
      </div>
      <div class="form-group">
                &lt;?php
                 echo form_label('Message','message');
        echo form_textarea(array('class'=>'required','id'=>'message','name'=>'message','rows'=>'5','value'=>set_value('message')));
        echo form_error('message', '<div class="error">', '</div>');
       ?&gt;
      </div>
      <div class="form-action">
       &lt;?php echo form_button(array('id'=>'submit','name'=>'submit','type'=>'submit','content'=>'Send Message')); ?&gt;
      </div>
     </fieldset>
    &lt;?php echo form_close(); ?&gt;

The jQuery function:

Code:

$(document).ready(function() {
    $('#contactForm').submit(function() {
     if(event.preventDefault){
      event.preventDefault();
     }else{
      event.returnValue = false;
     };

     var data = {
      'name' : $('#name').val(),
      'phone' : $('#phone').val(),
      'email' : $('#email').val(),
      'message' : $('#message').val()}
      $.ajax({
      url: "<?php echo site_url(); ?>/contact/submit",
      type: "post",
      data: data,
      cache: false,
      success: function(html){
       $("#contactForm").replaceWith(html);
      }
     });
     return false;
    });
   });

The Controller:

Code:

public function submit()
{
  if ($this->input->is_ajax_request())
  {
   $this->load->library('form_validation');
  
   $this->form_validation->set_rules('name', 'Name', 'trim|required|xss_clean');
   $this->form_validation->set_rules('phone', 'Phone', 'trim|xss_clean');
   $this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email|xss_clean');
   $this->form_validation->set_rules('message', 'Message', 'trim|required|xss_clean');
  
   if ($this->form_validation->run() == FALSE)
   {
    echo $this->load->view('contact/form');
   }
   else
   {
    echo $this->load->view('contact/thanks');
   }
  }
  else
  {
   redirect('contact','refresh');
  }
}

[eluser]Pnux[/eluser]
You need to re-run the JS function (in this case, $('#contactForm').submit())that binds the submit event handler or bind it in a way that will be automatically re-run when DOM changes (.live() does this, but seems to be deprecated). You could also handle the displaying of errors from JS (using JSON to tell the client which errors the user is getting) instead, so the form object (client-side, DOM object) remains untouched.

[eluser]backtoeleven[/eluser]
Thanks for the help. I've implemented .on() which has superseded .live() and all is working fine now. Thanks again.