.load导致Internet Explorer中的页面刷新？

Question

So I've got a simple site with a menu bar and a content area. When I click one of the buttons in the menu bar, it's supposed to do a quick fadeIn transition on a graphical element of the content area, and load external content into a div.

$("#button1").click(function(){
$(".contentdivs").fadeIn(1000);
$(".content").load("external.html");
});

This works exactly as intended in Chrome, Safari and Firefox, but not in Internet Explorer.

In Explorer, clicking #button1 will trigger the .Fadein and the .load (I can see the transition and the external data render very briefly) but then the entire page refreshes, and the external content gets unloaded.

Any ideas why this is happening, and how to fix it?

Answer 1

Is the button an anchor tag? You probably need to prevent the click event's default action and stop the event from bubbling in case there's an anchor parent to the button:

$("#button1").click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $(".contentdivs").fadeIn(1000);
    $(".content").load("external.html");
});