Uncaught ReferenceError: preventDefault is not defined

Uncaught ReferenceError: preventDefault is not defined

Hello, I'm facing a strange issue but haven't been able to fix. I'm getting Uncaught ReferenceError: preventDefault is not defined error whenever I trigger the 'click' action. I found out that the issue is typically caused when jQuery isn't properly loaded. However, in my case, the jquery does load before my custom javaScript file. In fact, I'm able to execute it properly for another event that evokes the function just below the following snippet. That means, the file is actually being loaded fine and 'works'; but not in the following specific case. 

The strange thing is that if I completely remove event.preventDefault() from the code, I keep getting the same error. What could be the fix? 


Code: 

$(function() {

    //Monitor toggle and trigger AJAX to update app status
    $("#io-search-jobs").on( 'click', function ( event ) {

        event.preventDefault();
        // Serialize job search form
        var jobSearchForm = $("#io-job-search-form").serialize();

        //Add User To Site & Update User Meta
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_object.ajax_url + "?action=io_searchJobs",
            data: jobSearchForm,
            success: function (data, textStatus) {
                console.log(data);

                $.each(data, function(key,value) {
                    var dp = '<h2>'+value+'</h2>';
                    $("#SearchResults").append(dp);
                });

            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("Failure");
            },
            complete: function () {
                console.log("AJAX Complete");
                $(".uil-ellipsis-css").fadeOut(900);
            }
        });
    });
});