신선한 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 호출의 success 콜백 함수 내에서 재설정하십시오.

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); 
});