Question

Possible Duplicate:
$(this) doesn't work in a function

Im having a problem targeting the right element in my code. I have a list of thumbnails on my page, and when you click on a “I dislike this” icon the targeted video change for another one.

Here’s the HTML

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
       <div>
          <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
       </div>
   </div>
   <a href="...">
   <h1>...</h1>
   <div class="information">...</div>
</li>

Ajax is:

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

What Iam doing wrong? even $(this).css(“border”,”1px solid red”) is not “working”. (I tried with background color, and color too) I dont see anything.

$(This) refers to the “a” tag where the function is called right? So im searching for his parent named videobox… Help?

So can I target

Answer 1

You should not use onclick, you should bind it to an event, especially as you could easily make this degrade well if the user does not have ajax.

Change your <a> tags to this:

<a href="/change/videos/1/thumbsdown/"
    data-sort="sort"
    data-page="page"
    class="dislike_black"
    title="I dislike this"></a>

jQuery event:

$('.dislike_black').click(function(e) {
    e.preventDefault(); // Prevent link from clicking

    var $aTag = $(this); // I use $aTag to denote a jq object

    $.ajax({
        url: $aTag.attr('href'),
        type: "POST",
        data: {
            "sort": $aTag.data('sort'), // data-sort attr value
            "page": $aTag.data('page') // data-page attr value
        },
        success: function(response) {
            $aTag.closest(".videoBox").html(response);
        }
    });
});

Now it works without javascript, and you’re not using nasty onclick! Untested/no warranty.