Question

I have a form + layout like so:

<form ...>
    <div id="editor">
        [form html]
        <input type="submit" value="Submit form" />
    </div>
</form>

And the following javascript:

$(function() {
    var form = $('#editor').parents('form');
    alert(form.length); // this alerts "1"
    $(document).on('submit', 'form', function() {
        alert('document form submit fired'); // this works as expected (alerts)
    });
    form.on('submit', function() {
        alert('selected form submit fired'); // this is never alerted
    });
});

This form is not loaded via ajax. When the page loads, the first dialog alerts “1”. However when submitting the form, only one alert is fired — the one that triggers submit for all forms in the document.

Why would this happen?

Answer 1

It does work. Something else is happening which is preventing the second alert from firing.