Question

I checked the other questions about this problem but they didn’t help me. I’m confused as to why this doesn’t work but instead of wasting hours trying to figure it out, I figured I’d better ask here. I have the following AJAX call:

        $("#day_list li").live("click", function()  {
        var day = $(this).attr('value');
        $.ajax({
            type: "POST",
            url: "/planner/get_detail",
            data: { post_day: day, post_month: current_month, post_year: current_year },
            success: function(data)
            {
                $(this).addClass('selected');
                $(".detail_header").html(data['detail_header']);
            }
        });
    });

Everything here works fine, except for $(this).addClass('selected');. My .selectedclass looks like this for now:

.selected
{
     border: 1px solid red;
}

I don’t see what’s wrong here, to be honest. Must be overlooking something, but what? Thanks

Answer 1

Try this:

$("#day_list li").live("click", function()  {
        var day = $(this).attr('value');
        var clickedObj = $(this);
        $.ajax({
            type: "POST",
            url: "/planner/get_detail",
            data: { post_day: day, post_month: current_month, post_year: current_year },
            success: function(data)
            {
                clickedObj.addClass('selected');
                $(".detail_header").html(data['detail_header']);
            }
        });
    });

The $(this) in the success does not reflect the clicked object anymore because of the scope in javascript. instead it reflects the $.ajax object. Assigning it to a variable above the ajax object ensures that you have a reference to the clicked object