jquery加载函数不会替换以前加载的页面

Question

当用户单击链接时，我尝试将不同的页面加载到 div 中。

这是我的index.html代码:

 <li><a href="javascript:loadContent('#content_main','cardinal.jsp')">SMS</a></li>
 <li><a href="javascript:loadContent('#content_main','paypoint.jsp')">Paypoint</a></li>

loadContent 函数如下所示:

function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").empty();
$(""+elementSelector+"").load("http://localhost:7070/ning/"+sourceUrl+"");
}

我的cardinal.jsp 看起来像这样:

$(document).ready(function() {
    setInterval(function(){
    alert("Cardinal");
},5000);
});

paypoint.jsp 有以下代码:

$(document).ready(function() {
    setInterval(function(){
    alert("paypoint");
},5000);
});

我首先单击链接短信。这将加载cardinal.jsp 并每5 秒显示一次alertbox(cardinal)。现在，当我单击 paypoint 链接时，我应该仅运行 paypoint.jsp 页面。但是，相反，它似乎将 paypoint.jsp 内容附加到 div (它已经具有 cardinal.jsp 的内容)。这会导致两个警报框交替显示。

如您所见，我尝试在加载新页面之前清空 div 的内容。但是，它仍然不起作用。我在这里做错了什么？

感谢您提前提供帮助

Answer 1

如果删除设置间隔的代码，间隔不会消失。如果你想删除它，请执行以下操作:

var interval = setInterval(function() {
  alert("paypoint");
}, 5000);

clearInterval(interval);

请记住，您并不是加载全新的页面，而是加载现有页面的新内容。