jQuery replaceWith replace div 导致重新加载

Question

我正在使用 jQuery replaceWith 将可见的 <div> 替换为另一个。但是由于某种原因，当我单击链接以启动替换时，页面重新加载并导致原始<div> 再次出现。这是我的 jQuery：

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

为什么这个div被替换后会重新加载？

Answer 1

你需要取消该事件，因为锚点点击的默认事件是改变窗口位置：

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

Answer 2

您的<a> 标签可能有一个href="#"。这会在单击时重新加载页面。

当你绑定你的事件处理程序时，你需要取消你的默认行为：

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

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

或者，您可以将<a> 标签更改为href="javascript:void()"。

Answer 3

您需要返回 false 或 preventDefault()。

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

或

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