jQuery .on() api and bypassing it

[Frinavale]

I am still a novice when it comes to using jQuery and it has been a while since I've developed in the web.

I am taking advantage of something and wanted to make sure that what I am doing is correct.

I using the jQuery .on() api attach an event handler function for form.submit events within the document.


What I have discovered is that the the event handler is not executed if I directly access the form to submit it; however, if I use jQuery to create it's form object, the event handler is executed.

For example if I use:

<select id="SelectedMasterID" onchange="this.form.submit();" name="SelectedMasterID"> 
<!-- options -->
</select>

The above code will bypass the event handler method.

However, if I use the following it will not be bypassed:

<select id="SelectedMasterID" onchange="$(this).parents('form').submit();" name="SelectedMasterID"> 
<!-- options -->
</select>

This is actually beneficial to my situation because in some cases I want to bypass the method attached to the submit event.

According to the .on() api documentation:

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

So, am I correct in thinking that this.form.submit() will always bypass the event handler?

Thanks,

-Frinny

[Dormilich]

So, am I correct in thinking that this.form.submit() will always bypass the event handler?

that’s like with apples and pears. the submit() in this.form.submit() is different from the submit() in $('form').submit() (which is actually a shortcut for trigger('submit')).

further details may depend on how exactly you defined the handler.

[Dormilich]

although, if you are using jQuery, why are you using event attributes? wouldn’t it be easier to use

$('#SelectedMasterID').on('change', function() {
    this.form.submit();
    // or
    $(this.form).submit();
    // or
    if (validate(this)) {
        this.form.submit();
    }
});
 

?

[Frinavale]

I wanted to handle every item that submits the form, not just that one <select>.

I ended up changing my design so that ajax calls are only made in particular cases.