jQuery - stopping anchor <a> from redirecting using onClick=“function(this)”

Question

this is my anchor i am using in CodeIgnitor pagination.

<a href="http://perfex_crm.ng/clients/get_front_page_jobs/2" onclick="myFunction(this)" data-ci-pagination-page="2">2</a>

now this is the definition of function in Javascript

function myFunction(e){
    console.log(e);
    e.preventDefault()
}

Now e is an anchor which is shown in the console. but when i try

e.preventDefault()

it gives me this error.

e.preventDefault is not a function

and obviously page redirected which is original problem i want to solve. i do not want it to redirect.

Answer 1

You're passing the value of this which is the <a> element object, not the event object.

You could pass event instead, but you really should avoid using intrinsic event attributes (which have a bunch of gotchas) and switch to addEventListener .

const links = document.querySelector('[data-ci-pagination-page]');
for (let i = 0; i < links.length; i++) {
    links[i].addEventListener(myFunction); 
}

Answer 2

Since you've written onclick="myFunction(this)" you pass this as an argument, where this is your <a> element.

Try passing the event instead: onclick="myFunction(event)"

Answer 3

this seems to work like a charm:

 function myFunction(event){ event.preventDefault(); } 

 <a href="http://perfex_crm.ng/clients/get_front_page_jobs/2" onclick="myFunction(event)" data-ci-pagination-page="2">2</a>