How to prevent SharePoint site page refresh itself when jquery .load is triggered?

Question

I have a simple SharePoint site page (created in Site Page library). I added a simple jquery syntax here:

<script>
$(function() {
$("#button_overview").on("click", function(){   $("#homepagecontent").load("../description/overview.htm");   });

});
</script>

When I click the button, overview.htm is loaded for 1 sec and the entire page is refreshed. It cause the page render back to previous stage.

I have also tried .html("<p>hello</p>"). The result is "hello" show up for 1 sec and page is refreshed.

Is it default SharePoint behavior? How can I work around it?

Answer 1

As per my understanding (Correct me if I am wrong), you forgot to add the type="button" to your button element.

So, Add type="button" to the button element like:

<button type="button" id="button_overview" onclick="yourFunction()">Click Here</button>

Reference: prevent refresh of page when button inside form clicked