javascript - Jquery，Codeigniter 2.1 - 分页问题

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 每次都被操纵，因此 click 事件的处理程序丢失了。

试试这种方式：

$('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(); 
});