e.PreventDefault is Undefined

Question

I have registerAjax(e) function:

function registerAjax(e) {
e.preventDefault();
let userData = {
    username: $("#username").val(),
    password: $("#password").val(),
};
$.ajax({
    method: "POST",
    url: kinveyBaseUrl + "user/" + kinveyAppKey + "/",
    headers: kinveyAppAuthHeaders,
    data: userData,
    success: registerSuccess,
    error: handleAjaxError
});
function registerSuccess(userInfo) {
    saveAuthInSession(userInfo);
    showInfo('User registration successful.');
}

This function is invoked by this function

function registerUser() {
registerAjax();

When i run the app, i recieve the console message "Uncaught TypeError: Cannot read property 'preventDefault' of undefined(…)"

Is There any easy solution for fix this exception ?

function startApplication() { 
  //Bind The Form Submit Buttons 
  $(document).ready(function () {
    $("#btnRegister").on('click', registerUser()); 
  });
  loadingBox(); 
  //Bind the info / error boxes: hide on click 
  $("#infoBox, #errorBox").click(function () { 
    $(this).fadeOut(); 
  }); 
}

Answer 1

This doesn't do what you think it does:

$("#btnRegister").on('click', registerUser());

This invokes registerUser() immediately and sets the click handler to the return value of registerUser() , which doesn't return anything. I suspect you want this:

$("#btnRegister").on('click', registerUser);

The function name itself can be used as a variable to represent the function when passing it to a handler. (Or when doing much of anything with the function, short of invoking it. In JavaScript a function is a type like any other and can be passed around like any variable.)

Additionally , you'll need to pass the event through to your other function. By default, the click handler will be passed the event, so you can use it:

function registerUser(e) {
    // e is your event
}

In your case, you'd want to pass it along to your other function:

function registerUser(e) {
    registerAjax(e);
    // etc.
}

Answer 2

Pass the registerUser reference instead of calling it:

$("#btnRegister").on('click', registerUser); 

And add event parameter to registerUser :

function registerUser(e) {
  registerAjax(e);
  ...
}