Question

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

您需要返回false或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;
    });
});

Answer 3

您的<a>标记大概有href="#"。这会在点击时重新加载页面。

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

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

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

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

jQuery replaceWith替换div导致重载

3 个答案: