Question

I am creating pagination using Codeigniter, and I want to add ajax functionality. JS is working when pagination link is clicked first time. When it is clicked for the second time JS doesn’t work and pagination is working via PHP controller (this part is working without any problem). This is JS code:

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

Also scrollTop doesn’t work. What am I doing wrong?

Answer 1

Probably that’s because your DOM gets manipulated everytime, and hence the handler for the click event is lost.

try this way :

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

this will ensure rebinding the click event on each DOM manipulation