Question

当我点击DOM中的链接1时，我想做一个AJAX请求并在其前面加上html块（其中包含一个带id = "IdOfHtmlBlock"的div）：

$("#link1").on("click", function(){
 $.get("myBlock.html", function(data){
 $(".wrapper").prepend(data);
 });
});

点击我的DOM中的link2后可以删除它：

$("#link2").on("click", function(){
 $('#IdOfHtmlBlock').remove();
});

问题是，当我再次点击link1时，它会在myBlock.html前加两次。

提前致谢

编辑：

点击link1之前我的HTML：

<div class="wrapper">
 <div class="someOtherDiv"></div>
</div>

点击link1后我的HTML：

<div class="wrapper">
 <div id="IdOfHtmlBlock"></div>
 <div class="someOtherDiv"></div>
</div>

单击link2后应删除

IdOfHtmlBlock，依此类推......

Answer 1

为什么不尝试：

$("#link1").on("click", function(){
 $.get("myBlock.html", function(data){
 $(".wrapper").html(data);
 });
});

Answer 2

您可以在附加之前测试DOM中是否已存在 #IdOfHtmlBlock 。

此示例将删除它，如果它已经存在，再次预先添加它：

$("#link1").on("click", function(){
 if($('#IdOfHtmlBlock').length > 0) {
  $('#IdOfHtmlBlock').remove();
 }
 $.get("myBlock.html", function(data){
 $(".wrapper").prepend(data);
 });
});

你也可以决定不删除并重新添加它...

Ajax请求在第二次请求时复制html内容

2 个答案: