jQuery Uncaught TypeError in $(selector).on()

Question

I am getting the following error:

Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function

This is my code and it's somewhere in between the beforeSend and the success calls that the error is happening:

$('#main-container').on('click', '#sign-in-btn', function (event) {
    var username = $('#username-textbox').val();
    var password = $('#password-textbox').val();

    $.ajax({
        url: '/login',
        method: 'POST',

        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ":" + password));
        },

        success: function (data) {
        }
    });

    event.preventDefault();
});

I also tried to put inside a $(document).ready(function () { ... } call and I get the exact same error.

Solution

Having the event function return false fixed it because the error was somewhere during the propagation of the event and if an event returns false then event.stopPropagation() is "called".

Comments

[ozil]

you have to include jquery before and put it in $( document ).ready(function() {...});

[Artem Baranovskii]

Try to use Pause on exception feature in Chrome Dev Tools and go through call stack up with exploring variables

[VisioN]

@ozil Even the first line won't be executed if jQuery was not included or ready wrapper was not implemented.

[David Gomes]

I wrapped it inside a $(document).ready() call and I still get the exact same error. Editing the question to include that.