jquery - 如何将事件绑定(bind)到通过ajax加载的数据并且仍然有效

Question

我已经实现了 ajax 选项卡，并在 1 个 ajax 选项卡中加载了一个日历，该日历使用 ajax 更改月份和年份。我遇到的问题是加载内容的绑定(bind)事件。

这是我正在使用的代码示例:

$.ajax({
     type: 'POST',
     url: 'main/ajaxjson/load_course_details',
     data: {page : which},
     success: function(home){       
            $('#ajax-content ').hide();
            $('#ajax-content').empty().append(home);
            $('#ajax-content').fadeIn();               
     }
 })

使用此代码，我加载选项卡，生成整个 html 并将其附加到 ajax-content div 中。之后，我绑定(bind)事件以用于新内容，如下所示:

('body').on('click', 'a.next-month', function(){
     // code here })

但这样做的问题是每次点击后都会丢失数据..我希望加载所有数据并轻松对新数据执行ajax请求。

Answer 1

使用一个对象来存储已经进行的ajax调用:

var whichTree = {};

var handler = function(home){  
    whichTree[which] = home;     
    $('#ajax-content ').hide();
    $('#ajax-content').empty().append(home);
    $('#ajax-content').fadeIn();               
};

if ( whichTree[which] ) {
    handler(whichTree[which]);
}
else { 
    $.ajax({
        type: 'POST',
        url: 'main/ajaxjson/load_course_details',
        data: {page : which},
        success: handler
    });
}