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秒显示一次警报框（基数）。现在，当我点击paypoint链接时，我应该只运行paypoint.jsp页面。但是，相反，它似乎将paypoint.jsp内容附加到div（已经有cardinal.jsp的内容）。这导致两个警报框交替显示。

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

感谢您的帮助

Answer 1

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

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

clearInterval(interval);

请记住，您没有加载一个全新的页面，而是将新内容加载到现有页面。

Answer 2

是的，正如Heikki所建议的......这对我有用.....

在index.html中

<script>
    var interval;
function loadContent(elementSelector, sourceUrl) {
    $(elementSelector).empty(); 
    interval = window.clearInterval(interval);
    $(elementSelector).load("http://localhost/"+sourceUrl+"");
}
</script>

和paypoint.jsp

$(document).ready(function() {
    interval = window.setInterval(function(){
    alert("Paypoint");
    },5000);
});

并在cardinal.jsp

中

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

检查这是否适合你......

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

2 个答案: