Drupal 7 ajax button added via ajax callback

Question

I have an issue with this ajax callback in a form. Here is the callback:

function mymodule_add_more_callback($form, $form_state) {

$commands = array();

$current_id = $form_state['number_fieldsets'] - 1;

$id = 'node_group_custom_' . $current_id;

$fs = drupal_render($form['custom_fieldset'][$current_id]);

$commands[] = ajax_command_append(".vertical-tabs .vertical-tabs-panes", $fs);

$commands[] = array(
    'command' => 'enable_tab',
    'id' => $id,
    'id_li' => 'vertical_tabs_li_' . $current_id,
    'current_id' => $current_id,
);

return array(
    '#type' => 'ajax',
    '#commands' => $commands,
);

}

enable_tab is a custom ajax command that works fine.

$fs is a fieldset that contains a few form elements.

$fs also contains another ajax button that is intended to remove the corresponding fieldset via Ajax

$form['custom_fieldset'][$i]['remove'] = array(
'#type' => 'submit',
'#value' => 'x',
'#limit_validation_errors' => array(),
'#attributes' => array(
    'title' => t('Remove section'),
    //'class'   => array('remove_section'),
    'style' => 'cursor:pointer',
    'id'    => 'remove_section_' . $i,
), 
'#ajax' => array(
    'callback' => 'mymodule_remove_section', 
    'wrapper' => 'names-fieldset-wrapper', 
)

);

The problem is that the remove ajax button does not work as expected. It should trigger this callback mymodule_remove_section but it is just reloading the page. I assume this is happening bcause it is added with ajax_command_append. Is there any solution to add ajax buttons with ajax_command_append called from another ajax callback?

EDIT

I'm passing a html string - $fs = drupal_render($form['custom_fieldset'][$current_id]); that obviously does not have the ajax event attached. Is there any other alternative? For example to pass the $form['custom_fieldset'][$i]['remove'] button instead of rendered html source along with my custom command?

Answer 1

I found the answer here.

I was because of the id of my button.