Pagination number elements do not work - jQuery

Question

Hello, I am trying to get my pagination links to work properly. It seems when I click any of the pagination number links to go the next page, the new content does not load. literally nothing happens and when looking at the console in Firebug, nothing is sent or loaded.

I have on the main page 3 links to filter the content and display it. When any of these links are clicked the results are loaded and displayed along with the associated pagination numbers for that specific content.

Here is the main page so you can see what the structure looks like for the jquery:

<?php
include_once('generate_pagination.php');
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="jquery_pagination.js"></script>

<div id="loading" ></div>
<div id="content" data-page="1"></div>

<ul id="pagination">
<?php generate_pagination($sql) ?>
</ul>

<br />
<br />

<a href="#" class="category" id="marketing">Marketing</a>
<a href="#" class="category" id="automotive">Automotive</a>
<a href="#" class="category" id="sports">Sports</a>

The jquery below is pretty simple and I don't think I need to explain what it does. I believe the problem may be with the $("#pagination li").click(function(){ since the li elements are the numbers that do not work when clicked. Even when I try to fadeOut or hide the content on click nothing happens. I'm pretty new to the jquery structure so I do not fully understand where the real problem is occurring, this is just from my observation.

The jquery file looks like this:

$(document).ready(function(){

 //Display Loading Image
 function Display_Load()
 {
     $("#loading").fadeIn(900,0);
  $("#loading").html("<img src='bigLoader.gif' />");
 }
 //Hide Loading Image
 function Hide_Load()
 {
  $("#loading").fadeOut('slow');
 };


   //Default Starting Page Results

 $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});

 Display_Load();

 $("#content").load("pagination_data.php?page=1", Hide_Load());

//Pagination Click
$("#pagination li").click(function(){

  Display_Load();

  //CSS Styles
  $("#pagination li")
  .css({'border' : 'solid #dddddd 1px'})
  .css({'color' : '#0063DC'});

  $(this)
  .css({'color' : '#FF0084'})
  .css({'border' : 'none'});

  //Loading Data
  var pageNum = this.id;

    $("#content").load("pagination_data.php?page=" + pageNum, function(){

          $(this).attr('data-page', pageNum);

           Hide_Load();
        });
});

// Editing below.        
// Sort content Marketing    
    $("a.category").click(function() {
        Display_Load();

        var this_id = $(this).attr('id');

      $.get("pagination.php", { category: this.id },
        function(data){

            //Load your results into the page  
            var pageNum = $('#content').attr('data-page');

            $("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id );
            $("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load());
        });  
    });


});

If anyone could help me on this that would be great, Thanks.

EDIT:

Here are the innards of <ul id="pagination">:

<?php
function generate_pagination($sql) {
  include_once('config.php');
  $per_page = 3;

  //Calculating no of pages
    $result = mysql_query($sql);
    $count = mysql_fetch_row($result);
    $pages = ceil($count[0]/$per_page);

  //Pagination Numbers
  for($i=1; $i<=$pages; $i++)
  {
    echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>';
  }
}

$ids=$_GET['ids'];
generate_pagination("SELECT COUNT(*) FROM explore WHERE category='$ids'");

?>

Answer 1

Try moving the code that is below // Sort content Marketing so it's above $("#pagination li").click()