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_contai开发者_Python百科ner').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!
I think this approach uses bind. You should use live:
$("#next_button").live('click', function() { // your code });
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
}
}
精彩评论