срабатывает событие класса только один

Question

таблица данных с Ссылка

<strong>1</strong> <a href ='index.cgi?reqpage=2&job_category_id=1' class='paginateAdmin' id='nonItPaginate'>nextPage</a> 

$(document).ready(function() { 
    $('.paginateAdmin').on('click', function (e) { 
     e.preventDefault(); 
     var post = $(this).attr("href"); 
     var id = $(this).attr('id'); 
     var array = post.split('?'); 
     $.post(
      'index.cgi', 
     array[1], 
     function (data, status) { 
      switch (id) { 
       case "nonItPaginate": 
        $('#nonit').html(data); 
        break; 
       case "ItPaginate": 
        $('#it').html(data); 
        break; 
       case "govtPaginate": 
        $('#govt').html(data); 
        break; 
       default: 
      } 
     }); 
    }); 
}); 

после запроса после данных состоит из ссылки

таблицу данных по этой ссылке

<strong>2</strong> <a href ='index.cgi?reqpage=3&job_category_id=1' class='paginateAdmin' id='nonItPaginate'>nextPage</a> 

, но когда я нажимаю следующая страница, событие click не работает. если он работает так, что я могу получить данные ответа имеет

таблица данных

<strong>3</strong> <a href ='index.cgi?reqpage=4&job_category_id=1' class='paginateAdmin' id='nonItPaginate'>nextPage</a> 

но не стреляя событие.

Answer 1

этот $('.paginateAdmin').on('click', function(){}) свяжет click событие только для всех существующих элементов с классом paginateAdmin. Вы должны использовать такой синтаксис вместо: $(document).on('click', '.paginateAdmin', function(){...

Answer 2

решение

$(document).ready(function() { 

    $(document).on('click','.paginateAdmin', 
      function(e){ 
    e.preventDefault(); 
     var post = $(this).attr("href"); 
     var id=$(this).attr('id'); 
     var array = post.split('?'); 

    $.post(
     'index.cgi', 
     array[1], 
     function(data,status){ 

      switch(id) 
      { 
       case "nonItPaginate": 

        $('#nonit').html(data); 

        break; 
       case "ItPaginate": 

         $('#it').html(data); 
         break; 
       case "govtPaginate": 

        $('#govt').html(data); 
        break; 
      default: 

       } 


    }); 

    }); 
    });