Question

我正在使用Codeigniter创建分页，我想添加ajax功能。当第一次点击分页链接时，JS正在工作。当它第二次被点击时JS不起作用，并且分页通过PHP控制器工作（这部分工作没有任何问题）。这是JS代码：

var pag = $('#pagination a');

    pag.on('click', function(e){
        var pagination =
            {
            target : $(this).attr('href') + ' .mali_oglasi',    
            content : $('.mali_oglasi'),
            container: $('.mali_oglasi_wrapper')
            };

            pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
                pagination.container.load(pagination.target, function(){
                    pagination.content.animate({'opacity':1}, 400);
                });                
            });            
        e.preventDefault(); 
    });

scrollTop 也不起作用。我做错了什么？

Answer 1

可能这是因为你的DOM每次都被操纵，因此点击事件的处理程序会丢失。

尝试这种方式：

$('body').on('click', '#pagination a', function(e) {
    var pagination =
    {
        target : $(this).attr('href') + ' .mali_oglasi',    
        content : $('.mali_oglasi'),
        container: $('.mali_oglasi_wrapper')
    };

    pagination.content.animate({
        'opacity':0, 
        scrollTop: 0
    }, 400, function(){
        pagination.container.load(pagination.target, function(){
            pagination.content.animate({
                'opacity':1
            }, 400);
        });                
    });            
    e.preventDefault(); 
});

这将确保重新绑定每个DOM操作上的click事件

Answer 2

试试这个兄弟。

也许该元素尚未加载......

var pag = $（'＃pagination a'）;

pag.on('click', 'a', function(e){
    var pagination =
        {
        target : $(this).attr('href') + ' .mali_oglasi',    
        content : $('.mali_oglasi'),
        container: $('.mali_oglasi_wrapper')
        };

        pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
            pagination.container.load(pagination.target, function(){
                pagination.content.animate({'opacity':1}, 400);
            });                
        });            
    e.preventDefault(); 
});

Jquery，Codeigniter 2.1 - 分页问题

2 个答案: