title: Why JQuery Form submitHandler does not refresh its callback?
body: <p>I am using the <a href="http://malsup.com/jquery/form/" rel="nofollow noreferrer">JQuery Form Plugin</a>, the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow noreferrer" title="JQuery Validation Plugin">JQuery validation plugin</a> and the  jqTransform plugin. </p>
  
  <p>I have a hidden form which I make visible to add or edit stuff. Edit or Add actions trigger the next function call.</p>
  
  <pre><code>function activateAddForm(formId,callback) {
      $('#'+formId).jqTransform().validate({
              submitHandler: function(form) {
                  $(form).ajaxSubmit( {
                      dataType: "json", 
                      success: function(json) {
                          callback(json);
                      }
                  });                 
              }
          }); 
  }
  </code></pre>
  
  <p>Each call with different parameters. For add, I call it with  </p>
  
  <pre><code>activateAddForm('add-new-form',addToy);
  </code></pre>
  
  <p>for edit, I call it</p>
  
  <pre><code>activateAddForm('add-new-form',editToy);
  </code></pre>
  
  <p>This is what happens: </p>
  
  <ul>
  <li>Reload the page.</li>
  <li>Edit one toy. </li>
  <li>Submit the form.</li>
  <li>The editToy function is called. </li>
  <li>Try to add something.</li>
  <li>The function activateAddForm is called with addToy as callback but once the form is submitted the editToy function is called instead.</li>
  </ul>
  
  <p>If the first thing I do after a reload is add a Toy. Then the addToy function is always called. </p>
  
  <p>I have tried adding: </p>
  
  <pre><code>function activateAddForm(formId,callback) {
      $('#'+formId).ajaxFormUnbind();
      ...
  }
  </code></pre>
  
  <p>or </p>
  
  <pre><code>function activateAddForm(formId,callback) {
      $('#'+formId).resetForm();
      ...
  }
  </code></pre>
  
  <p>But it has not work. Any idea what can I do?</p>
  
  <h2>Workaround trials</h2>
  
  <p>Activa's suggestion of adding the line: </p>
  
  <pre><code>$.removeData($('#'+formId)[0],'validator');
  
  function activateAddForm(formId,callback) {
  $('#'+formId).jqTransform();
  $.removeData($('#'+formId)[0],'validator');
  $('#'+formId).validate({
          submitHandler: function(form) {
              $(form).ajaxSubmit( {
                  dataType: "json", 
                  success: function(json) {
                      callback(json);
                  }
              });                 
          }
      }); 
  }
  </code></pre>
  
  <p>Casues the next:</p>
  
  <ul>
  <li>Reload the page.
  
  <ul>
  <li>Edit one toy.</li>
  <li>Submit the form.</li>
  <li>The editToy function is called.</li>
  <li>Try to add something.</li>
  <li>The form editToy funciton is called, followed by a call to add function. </li>
  </ul></li>
  </ul>
  
  <p>The above fix does not work but seems to be in the right direction. </p>
  
  <p>Any more ideas?</p>