separate preventDefault() from function

Question

Instead of something like this

$('#submitbutton').click(function(e) {
 e.preventDefault(); //to avoid the submit button to reload the page and go page to page one.
/* computing dimensions */
});

I'd like to put my function somewhere else, like this :

$('#submitbutton').click(computeUserDimensions);
function computeUserDimensions(){
/* computing dimensions */
}

But then I don't where to put the preventDefault to provide the click (which is on a submit button) to go to another page.

Can you help me figure this out?

Thanks

• Arpad Bajzath: put to bottom of the event the preventDefault

Answer 1

Add parameter event to your function and it will be passed by jQuery implicitly.

$('#submitbutton').click(computeUserDimensions);
function computeUserDimensions(event){
 /* computing dimensions */
 event.preventDefault();
}

• Louis: Thanks, this works (but with event̀ instead of e`). Thanks!
• Louis: What is the difference between writing $('#submitbutton').click(computeUserDimensions); function computeUserDimensions(event){ ...} and $('#submitbutton').click(function() { computeUserDimensions(); }); function computeUserDimensions(event){ ...}
• Adil: In first you are passing reference of defined function and in second you are passing function (anonymous).
• Louis: ok. Problem in this solution is if I want to reuse the function with another event, and don't want to preventDefault on this other function. The solution from Kami seems to handle this.
• Adil: That method is already using two functions one anonymous and other named so you can make two named functions again and put the common code in one function and call from other.

Answer 2

You can change the function call to be an anonymous function that handles the click and calls the sub function.

$('#submitbutton').click(function(e) {e.preventDefault(); computeUserDimensions();});
function computeUserDimensions(){
/* computing dimensions */
}

• Louis: what if I need to pass a variable (array) to computeUserDimensions in :$('#submitbutton').click(function(e) {e.preventDefault(); computeUserDimensions();}); ? Should I write : $('#submitbutton').click(function(e) {e.preventDefault(); computeUserDimensions(prodata);});
• Kami: @user130482 yes (provided prodata is correctly populated array).

Answer 3

function computeUserDimensions(e){
 var evt = e ? e:window.event;
 if (evt.preventDefault) evt.preventDefault();
 /* computing dimensions */
}

• Louis: the problem in this solution is if I want to reuse the function with another event, and don't want to preventDefault on this other function. The solution from Kami seems to handle this