jQuery replaceWith replace div causes reload

Question

I'm using jQuery replaceWith to replace a visible <div> with another. However for some reason when I click the link to initiate the replaceWith, the page reloads and causes the original <div> to appear again. Here's my jQuery:

$(function(){
    $("a#startSlide").click(function () {
        $('div#leftText').replaceWith('div#slide');
    });
});

Why is this reloading after the div is replaced?

score 3 · Accepted Answer · answered Oct 22 '11 at 22:05

3

You need to cancel the event, since the default event for an anchor click is to change the window location:

$(function(){
    $("a#startSlide").click(function (event) {
        event.preventDefault();
        $('div#leftText').replaceWith('div#slide');
    });
});

answered Oct 22 '11 at 22:05

AlienWebguy

76,997
17
122
145

Won't returning false do the same thing? – Paul Tomblin Oct 22 '11 at 22:07
I prefer not to return false. The intention of the code does not obviously imply the behavior of the code, whereas `event.preventDefault()` does exactly what it says and novice devs don't have to guess what it is trying to do. – AlienWebguy Oct 22 '11 at 22:12
@AlienWebguy: `return false;` would be preferable if you have `$('a').click(function() { /* do ajax loading */ })` elsewhere, otherwise your second handler will still execute. – Eric Oct 22 '11 at 22:22
`return false` won't prevent your example from firing. Its two binds. – AlienWebguy Oct 22 '11 at 22:35
@AlienWebguy: I have a similar problem as tvalent2 except if I use preventDefault it wont do anything at all. My code is the following: var html =
$('#container').replaceWith(html); inside a script tag for
– EBM Nov 24 '12 at 01:41

Ivan · Answer 2 · 2011-10-22T22:16:07.170

0

You need to either return false or preventDefault().

$(function(){
    $("a#startSlide").click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('div#leftText').replaceWith('div#slide');
    });
});

OR

$(function(){
    $("a#startSlide").click(function (e) {
        $('div#leftText').replaceWith('div#slide');
        return false;
    });
});

edited Oct 22 '11 at 22:16

answered Oct 22 '11 at 22:05

Ivan

10,052
12
47
78

Note these are _not the same_ – Eric Oct 22 '11 at 22:12
@Eric: True: http://stackoverflow.com/questions/2017755/whats-the-difference-between-e-preventdefault-and-return-false – Ivan Oct 22 '11 at 22:14

score 0 · Answer 3 · answered Oct 22 '11 at 22:10

Your <a> tag presumably has a href="#". This reloads the page when clicked.

When you bind your event handler, you need to cancel your default behaviour:

$(function() {
    $('a#startSlide').click(function() {
        $('div#leftText').replaceWith('div#slide');

        return false;
        //equivalent to:
        //  e.preventDefault();
        //  e.stopPropagation();
    });
});

Alternatively, you could change your <a> tag to be href="javascript:void()".

jQuery replaceWith replace div causes reload

3 Answers3