Question

$(".paginate li").click(function(){
    $(this).attr('class','current');    
    $("#ajax_results").load("test.php?page=" + $(this).attr('rel')).fadeIn();
});

The above code is for a pagination script. When the user clicks the pagination <li> the AJAX script fires off a request based on the rel value. The issue I am having is with:

$(this).attr('class','current');

It applies for a brief second and then vanishes. Ideally it would apply a class of ‘current’ to the clicked <li> and remain. I’m not sure why it is being removed immediately after being applied.

Answer 1

I’ve solved my own problem and thought I would post the solution. After reviewing the code it became obvious that the issue with adding the class is that $(this) is no longer defined once the AJAX call is made. There may be a more elegant workaround but what I’ve done is below:

$(".paginate li").click(function(){
    var rel = $(this).attr('rel');

    $("#ajax_results").load("/ajax.php?id=" + $(this).attr('rel'), function(response, status, xhr) {
        if (status == "success") {
            $("li[rel="+rel+"]").addClass('current');
        }
    });
});

I declare rel as the value of $(this).attr('rel') and then on success pass along the addClass() function to the relevant item. Works perfectly.