jQuery: re-bind works after ajaxForm submit returns HTML, but not subsequent submit…why, is one rebind the limit?
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' }
});
});
Solution
I ended up abandoning the above approach and stuck to two ajax calls, and only two form submits, which solved the problem.