Question

I have this form:

$form = array(
        '<form name="backup-form" class="backup-form" method="post" action="#">',
            '<fieldset class="backup-fields">',
                '<fieldset class="display-wrapper">',
                    '<label for="display" class="display-label">Backups</label>',
                    '<input type="text" name="display" class="display" value="' . $this->backups(false,true) . '" autocomplete="off" readonly="readonly" />',
                '</fieldset>',
                '<fieldset class="action-wrapper">',
                    '<button type="submit" name="clean" class="clean">Clean All</button>',
                    '<button type="submit" name="create" class="create">Create</button>',
                '</fieldset>',
            '</fieldset>',
        '</form>',
        '<div class="message-handling" class="message-handling"></div>'
    );
$form = implode("", $form);
echo $form;

And I’m trying to bind an even to each submit button like this:

$('.backup-form .clean').on({
    click: function() {console.log('Clean Button Pressed');}
});

or

$('.main-actions .backup-form').delegate('.clean', 'submit', function() {
    console.log('Clean Button Pressed');    
});

But none of it works. What’s happening ? Or what should I do to make it work ?

Answer 1

try, if you are dynamically adding the form

$(function(){
    $(document).delegate('.clean', 'submit', function() {
        console.log('Clean Button Pressed');    
    });
}

or if not this should work

$(function(){
$('.main-actions .backup-form').delegate('.clean', 'submit', function() {
    console.log('Clean Button Pressed');    
});
}