jQuery links problem

[kartul]

Hello, I'm having a jQuery problem. I'm trying to create ajax pagination but there is one big flaw. Everything works like it should but the ajax works only one time. Example. I go to the page, click on next (or any of the page numbers or last etc.) it loads the contents with ajax, displays it, everything's fine. But when I click again on some pagination link (next, any of the numbers etc.) it loads the page normal way. and then the it starts all over again, one time the links make ajax call, the other time they wont. Heres the code:

$(document).ready(function() {
        $("#pagination a").click(function(e) {
            e.preventDefault();
            $("#encodes").fadeOut().delay(400);
            $.ajax({
                type: "GET",
                url: this + "&pagination=true&ajax=true",
                dataType: "json",
                success: function(ms) {
                    $("#encodes").empty().append(ms.content);
                    $("#pagination").empty().append(ms.pagination);
                    $("#encodes").fadeIn();
                }
            });
        });
    });

How do fix this?

[.josh]

not 100% sure without seeing more code (like the relevant html this stuff affects) but if I had to take a guess, I'd say that when you make the AJAX request and new content is returned (probably specifically this: $("#pagination").empty().append(ms.pagination); ) you aren't applying the original .click() to the links that make the pagination script execute.  If this is the case, you need to actually put that .click(..) stuff in a function and then you can call the function initially on document.ready and then you'd also have to call the function again after the new content is loaded to reapply the event listener to the new links. 

 

IOW when you execute an event listener like that, it only applies to what is currently in the DOM, not new stuff generated.