CODEWITHSUNDEEP
javascriptjqueryhtml
skyisred
skyisred

Reputation: 7105

JQuery events cause page reload. How to fix?

I'm observing a behavior where onClick events cause a page to reload. 

$('#target').click(function(){
    $('#target').hide();
})

So the object is shown, it hides on click, but then page reloads and the object is shown again. I'm working on a website that was setup before me, so I'm not entirely aware of all its parts. Any idea what might cause this behavior and how to fix it?

Upvotes: 1

Views: 2412

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

You need to prevent the default event behavior with event.preventDefault:

$("#target").on("click", function (e) {
    $(this).hide();
    e.preventDefault();
});

Using return false will also work, but it does more than you may intend.

This is in line with the event cancellation standard

Upvotes: 7

bwoebi
bwoebi

Reputation: 23777

add a

return false;

as last statement so that the link is not called, only you function (onclick) is executed.

Upvotes: 3

Related Questions