Question

我有一个显示产品的页面。产品通过ajax请求显示。产品包括分页按钮。这是我的 $（ '文件'）。就绪（函数（）{

    $.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- 链接（分页按钮）。这应该返回下一组列表并再次在#result_container中显示，它还将再次加载分页按钮。我这样做是因为我无法提前完成，因为绑定时不存在分页按钮。

这是问题，为了使其工作，我将不得不再次在ajax完成为分页按钮添加onclick事件。我将不得不为更多产品和分页的每个ajax负载执行此操作。

这显然不是正确的做法。有什么建议吗？

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 ready上运行（在所有ajax调用之外）

（如果这两个调用相同，你可以创建一个函数并使用它来避免重复的代码.. ）

Ajax生成内容和jquery事件绑定

1 个答案: