javascript - Ajax リクエストが 2 番目のリクエストで HTML コンテンツを複製する

Question

id = "IdOfHtmlBlock"DOM でリンク 1 をクリックしたときに、AJAX リクエストを実行し、その html ブロッ​​ク ( の div を含む) を先頭に追加したいと考えています。

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

DOM で link2 をクリックすると、後で削除できます。

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

問題は、link1 をもう一度クリックすると、先頭にmyBlock.html2 回追加されることです。

前もって感謝します

編集：

link1 をクリックする前の HTML:

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

link1 をクリックした後の HTML:

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

IdOfHtmlBlocklink2をクリックした後に削除する必要があります...

Answer 1

#IdOfHtmlBlockを追加する前に、DOM に既に存在するかどうかをテストできます。

この例では、再度追加する前に、既に存在する場合は削除します。

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

もちろん、削除して再追加しないこともできます...

Answer 2

試してみませんか:

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