javascript - Ajax 变量重用构建

Question

在 getData() 上，我使用 ajax get 请求来拉取一些 li 并将它们附加到容器中。在 ajax 调用成功后，我创建一个名为 next_load 的变量，该变量获取数据属性并将其作为下一个获取数据调用的 url 传递。我遇到的问题是，在第二次单击时，调用中出现了变量的累积。在控制台中，我也可以看到第一个日期与第二个日期一起传递。目标是在页面加载时获取第一个日期。然后单击该框即可获取下一个日期等。

HTML:

<div id = "calendar">
                <div class = "box">
                    <ul class = "label">
                        <li>Sun</li>
                        <li>Mon</li>
                        <li>Tue</li>
                        <li>Wed</li>
                        <li>Thur</li>
                        <li>Fri</li>
                        <li>Sat</li>
                    </ul>
                </div>
                <ul class = "box-content">

                </ul>
    </div>

在控制台中:

    2 calendar.js:34 2016-03-05 -> on the first get, then this and the next on the second get and it keeps building up. 
calendar.js:34 2016-04-09



   function getData(url) {
    var next_load = '';
    $.ajax({
        url: 'student/calendar/' + url,
        type: 'GET',
        success: function(response) {
            var $result = $(response).filter('li');
            $('.box-content').append($result);

            next_load = $result.last().attr('data-date');
            useNextLoad(next_load); // dont use the value till the ajax promise resolves here

        }
    })
}
getData('show/2016/02');

function useNextLoad(next_load){
    var load = next_load;
    $('.box').click(function(){
       getData('load/' + load);
        console.log(load); // when i pass the next_load Im getting the previous next load and the new next load at the same time. Then on the next click the amount compounds.
    });

}

如果我重置变量 next_load 会阻止累积发生吗？我尝试在 ajax 调用之前清空变量，但仍然得到了构建。

Answer 1

可能是点击函数多次应用于 .box 时出现的问题。在绑定(bind)新的点击处理程序之前，您可能需要从 .box 中删除任何现有的点击处理程序。请参阅How to remove all Click event handlers in Jquery

function useNextLoad(next_load){
var load = next_load;
 $('.box').off("click");  // Remove any click handlers already on .box
$('.box').click(function(){
 ...

当然，如果您想更紧凑，您也可以在 jQuery 中链接调用。