Question

Trying to get a button working (jQuery UI chrome and jQuery functionality) in a second form that is in the html returned by ajaxForm that has been called on a first form. The button works in the first form – the jQuery UI chrome is visible and the ajaxForm event works. For the second form, the button is generic and ajaxForm does not work, it submits to the target defined in the form not via jQuery. My problem I think involves bind() or delegate() or live() but I am just not understanding how to rebind. Here is my code:

// prepare Options Object for first form submit of new program
     var options = { 
     target:     '#add_program_container', 
     success:    function (response) {
              jQuery('#add_program_container').html(response);
        }
     }; 

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

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

      // prepare Options Object for second form submit of new program - requirements
     var options = { 
      target:     '#add_program_container', 
      success:    function (response) {
         jQuery('#add_program_container').html(response);

         }
     }; 

     // pass options to ajaxForm for second form submit of new program - requirements

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

The Button:

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

The html(a form is returned by ajaxForm, this is the button using jQuery UI)

<button id="next_button" type="submit">Next</button>

Any help is much appreciated!

Answer 1

I added a function called initBinding() to the document.ready function and called it at the initial bind:

jQuery(document).ready(function() {

initBinding();

//functions for initial bind

function initBinding() {

    //other functions to rebind after ajax success, can be same functions called initially
}
}