Ajax生成的内容和jquery事件绑定

Question

我有一个显示产品的页面。产品通过ajax请求显示。产品中包括分页按钮。这是我的$(‘document’).ready(函数(){)

    $.ajax({
            url: '<?=base_url().'catalog/show_listings';?>',
            type:'POST',
            dataType: 'json',
            success: function(data){
                    $('#result_container').html(data);
                }, // End of success function of ajax form
             complete : function(){
                    $('ul#pag-link > li > a').click(function(){

                        var link = $(this).attr('href')

                        $.ajax({
                            url: '<?=base_url().'catalog/show_listings';?>',
                            type:'GET',
                            dataType: 'json',
                            success: function(listings){
                                    $('#result_container').html(listings);
                                } // End of success function of ajax form       
                         }); // End of ajax call                            

                        return false;
                    });
                }
            }); // End of ajax call

在第一个ajax调用成功后，我将获得清单，并在div #result_container中显示它们。然后，在完成相同的ajax调用后，我为无序列表#pag-链接(分页按钮)中的锚创建一个on单击。这将返回下一组清单，并在#result_container中再次显示，它还将再次加载分页按钮。我是在完成时才这样做的，因为我不能更早地完成它，因为绑定时不存在分页按钮。

问题是，要使它正常工作，我必须再次在ajax完成中为分页按钮添加onclick事件。对于更多产品和分页的每一次ajax负载，我都必须这样做。

显然，THis不是正确的方法。有什么建议吗？

Answer 1

将事件处理委托给始终存在的容器元素。

$.ajax({
    url: '<?=base_url().'catalog/show_listings';?>',
    type:'POST',
    dataType: 'json',
    success: function(data){
        $('#result_container').html(data);
    } // End of success function of ajax form
}); // End of ajax call

$('#result_container').on('click', '#pag-link > li > a', function(){
    var link = $(this).attr('href');

    $.ajax({
        url: '<?=base_url().'catalog/show_listings';?>',
        type:'GET',
        dataType: 'json',
        success: function(listings){
            $('#result_container').html(listings);
        } // End of success function of ajax form       
    }); // End of ajax call                            

    return false;
});

并在dom准备就绪(除了所有ajax调用之外)上运行此命令。

(另外，如果两个调用是相同的，则可以创建一个函数并使用它来避免重复的代码。)