Question

Hello I have a form with a button and link jQuery events. I am submitting the form using ajaxForm which returns another form on success. The second form has the same button and link jQuery events which I re-bind using an init function called at the beginning in the document.ready() function. The rebind works fine. When I submit the second form using ajaxForm, a third form is returned with the same button and link events. The button and link events do not re-bind though using the second init function, which is the problem. Is this a limitation to jQuery – rebinding twice? Any thoughts much appreciated.

Code:

//init functions
jQuery(document).ready(function() {

   initBinding();
   initBindingTwo();

  //button 

jQuery('#next_button').button({
  icons: { secondary: 'ui-icon-carat-1-e' }
);

// pass options to ajaxForm for first form sumit of new program

jQuery('#new_program_form').ajaxForm(options);

//this one works after first form submit
function initBinding() {
     jQuery('#next_button').button({
  icons: { secondary: 'ui-icon-carat-1-e' }
 });


 //this one does not work after second form submit
 function initBindingTwo() {
     jQuery('#next_button').button({
  icons: { secondary: 'ui-icon-carat-1-e' }
 });

});

Answer 1

I ended up abandoning the above approach and stuck to two ajax calls, and only two form submits, which solved the problem.