Question

I’ve got this jquery code, that allows me to click on a link to fetch its parent and change some value in another place:

$("a.menu_filter_select").click(function(){
  var parent_filter = $(this).parent("tr");
  // Update value
  parent_filter.find(".filter_value").html($(this).html());
});

The problem is that it gets a null value on $(this), that’s an unexpected behavior, I don’t understand why it doesn’t work, any idea?

Here is the console debug with a breakpoint inside the method:

$(this)
> null
this
> <a class=​"menu_filter_select" href=​"http:​/​/​localhost:​3000/​#" rel=​"1">​test</a>​

Answer 1

I think it’s because your function receives an event as an argument, and you need event.target.

$('a.menu_filter_select').click(function(evt) {
    var parent_filter = $(evt.target).closest('tr');

I also recommend using closest instead of parent, since your code will work even if someone puts <b>, <i> or <span> around the anchor. I also use find instead of child.

Edit: in fact, this in FireFox refers to the anchor object, but I can’t for sure if it’s implemented the same way in other browsers. BUT event.target can refer to the child object if, say the document is like this:

<a><b>some text</b> other text</a>

then this event handler can output different elements:

$(a).click(function(event) { console.log(this, event.target); });

Try running this code in FireBug, see how it works.