Question

在getData（）上，我使用ajax get请求拉几个li并将它们附加到容器中。关于ajax调用的成功，我创建了一个名为next_load的变量，它获取data-attribute并将其作为下一个get数据调用的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可能会出现问题。您可能希望在绑定新的单击处理程序之前从.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中链接你的调用。

Ajax变量重用堆积

1 个答案: