Question

Here is the script:

  var currentCat = "all";
  $(document).ready(function(){
    $(".categoryItem").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         currentCat = $(this).attr("id");
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:1});                               });    
   $("#browseBookArea").ajaxSuccess(function(){                               
         $(this).show(300);
         $(this).load("Components/browseBookArea.jsp");
    });

   $(".pagination").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         var page = $(this).attr("id");
         alert(currentCat);
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
      });
});

I am making an online bookstore. The “browseBookArea” is the div where books will be displayed on the browser. Class “.categoryItem” is the category buttons. Whenever a category button is pressed, the books belong to that category will be retrieved through GET rerquest, and upon success, it will reload that area with returned books from servlet. That’s what the $(“#browseBookArea”).ajaxSuccess function does.

Now I am doing the pagination. Essentially, the pagination is the same as category, except this time category is already known (the current category, which I declared as a global variable), and the page is retrieved from the page button when user pressed (if a category button is pressed, it is considered the first page and is set to 1).

The problem is, it only works the first time when I press one of the category buttons, or one of the page buttons. After the ajax success function is invoked, the page buttons won’t work anymore. I put an alert there just to make sure. It won’t pop up anything.

All the “.pagination” buttons are inside the “#browseBookArea” div.

Answer 1

Your problem is that this:

$(this).load("Components/browseBookArea.jsp");

replaces the contents of #browseBookArea and thus you lose the buttons their bindings. You can either use the callback for load to bind click handlers to the new buttons or you can use live for the buttons:

$(".pagination").live('click', function(event){
    $("#browseBookArea").fadeToggle(100);
    var page = $(this).attr("id");
    alert(currentCat);
    $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
});

or delegate for the buttons:

$('#browseBookArea').delegate('.pagination', 'click', function(event) {
    $("#browseBookArea").fadeToggle(100);
    var page = $(this).attr("id");
    alert(currentCat);
    $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
});

There are some caveats with delegate and live, review the documentation to make sure they won’t apply to your specific case before you use them.