Question

I have a new problem with pagination:

<br><b>Page:</b><br/>
<?php
  for($i=0; $i<$count; $i++)
  {
    if ($i==0)
    {
      echo "<div class='selected_page_button'>".($i+1)." "."</div>";
    }
    else
    {
      echo "<div class='page_button'>".($i+1)." "."</div>";
    }
  }
?>

CSS code:

.page_button {
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  border:2px solid #000000;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  cursor: pointer;
}

.selected_page_button {
  color : #FFFFFF;
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  background:#0088cc;
  border:2px solid #000000;
}

And code for changing class of container:

$(".page_button").click(function () {
  $(".selected_page_button").attr("class", "page_button");
  $(this).attr("class", "selected_page_button");
});

It works correctly for all containers without first. When my page is created the first page is selected. When I click by “2”, then “1” is simple and “2” is selected. The same thing is with all containers without “1”: if I click by “2” (or other one) then I can’t click by first! “1” changes it’s view but doesn’t change behavior, because simple container is clickable and selected container is not clickable!

Answer 1

jcubic is correct with his solution but not his implementation. You need to make sure that the event is bound to all page_buttons, the ones that exist on page load and the ones that come into existence later.

jQuery’s ‘on’ and ‘live’ functions can accomplish that. These functions bind listeners to container elements and wait for the event to bubble up to them, so that even if a page_button is added later, the event will still hit the listening container.

Here is the correct implementation of these functions:

$('#paginationLinkContainer').on('click','.page_button',function() {
    $('.selected_page_button').attr('class','page_button');
    $(this).attr('class','selected_page_button');
});

In this block, the listener is bound to the container (which you may need to add to your markup) and filters so that it executes only when the events source has bubbled from a ‘.page_button’.

And for older versions of jQuery

$('.page_button').live('click',function() {
    $('.selected_page_button').attr('class','page_button');
    $(this).attr('class','selected_page_button');
});