新しいAJAX要求後に変数カウンタをリセットします。 JavaScript/jQuery

Question

申し訳ありませんが、この質問は簡単です！さて、AJAXでコンテンツをロードしているページがあります。

メインページ（index.htmlを）：

<a href="#" id="loadContent">Load Remote Page</a> 

<div id="ajaxContent"> 

//Loads AJAX contents Here!! 

</div> 

リモートページ（remote.html）：

<h2 id="counter"></h2> 
<button class="counterPlus" type="button">++</button> 

jQueryの（script.js）：クリックすると

$("#loadContent").on("click", function(){ 

     $.ajax({ 
       url: "remote.html", 
       type: "GET", 
       success: function(data){ 
          $("#ajaxContent").html(data); 
       } 
     }) 

}); 

var counter = 1; 
$("#ajaxContent").on("click", ".counterPlus", function(){ 
    console.log(counter); 
    counter = counter + 1; 
    $("#counter").text(counter); 
}); 

ロードされたページのリンク、増分された値を見ることができますが、問題はカウンタがリセットされていないことです。新しいAJAXロードの後（リンクをクリックしてください）。私は古い変数値がメモリにとどまっていることに気付いていますが、このような状況でカウンタをリセットするにはどうすればいいですか？

Answer 1

これは、変数counterがのグローバルスコープを持っているからです。

ajax呼び出しの成功コールバック関数内でリセットするだけです。

var counter = 1; 
$("#loadContent").on("click", function(){ 

    $.ajax({ 
      url: "remote.html", 
      type: "GET", 
      success: function(data){ 
         counter = 1; 
         $("#ajaxContent").html(data); 
      } 
    }) 
}); 

$("#ajaxContent").on("click", ".counterPlus", function(){ 
    console.log(counter); 
    counter = counter + 1; 
    $("#counter").text(counter); 
});