javascript - Ajax 请求在第二次请求时重复 html 内容

Question

我想做一个 AJAX 请求，并id = "IdOfHtmlBlock"在单击我的 DOM 中的链接 1 时添加它的 html 块（其中包含一个带有 的 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>   

IdOfHtmlBlock在我点击link2后应该被删除，依此类推......

Answer 1

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

如果它已经存在，则此示例将在再次添加之前将其删除：

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

当然，您也可以决定不删除并重新添加它...

Answer 2

Why not try:

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