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操作

Answer 2

重新綁定click事件試試這個兄弟..

也許還沒有加載的元素...

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