javascript - 新的 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);
});