'this' is undefined in jQuery custom method

Question

I have a method that I want to take some action depending on the 'checked' status of a checkbox. The 'click' event works as expected, but the 'myFunction' call in the foreach loop does not:

$(document).ready(function(){
  $('#TreeView1 :checkbox')
    .click(HandleCheckbox); // Works fine

  // Go through the entire Category treeview to 
  // see if there are any checkboxes that are already
  // checked.
  $.fn.myFunction = HandleCheckbox;
  $(":checked:checkbox").each(function(index) {
    // In the HandleCheckbox 'this' is undefined.
    $(this).myFunction(); 
  });

});

function HandleCheckbox() {
  alert(this.name + '=' + this.checked);
}

In the above code, when the '.click' method fires, 'this' is defined, as expected. When I call 'muFunction' in the foreach loop, 'this' is undefined in the 'HandleCheckbox' function.

I am still learning the jQuery ropes, so if there is a 'better' or easier way of doing this, please let me know.

Thanks.

bytebrite · Accepted Answer · 2009-07-27 18:46:02Z

6

This would also work:

$(":checked:checkbox").each(HandleCheckbox)

answered Jul 27, 2009 at 18:46

bytebrite

2,4062 gold badges15 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tod Birdsall Over a year ago

This was the most elegant solution for my situation. Thanks.

André Eriksson · Accepted Answer · 2009-07-27 18:21:33Z

3

In javascript, this refers to the owner of the object. For an event, this is the object that fired the event. However, the attribute isn't inherited for called functions from said function/event handler. While one might think it should work in the example you gave, I'm not fully knowledgeable about the intricacies of the language, but I think this is the culprit here. Pass along a reference to this if you would like to use it, like so:

$(this).myFunction(this);

This reminds me, you can get around this by using:

// this becomes the `this` "keyword" without defining a parameter to hold it
$(this).myFunction.apply(this);

answered Jul 27, 2009 at 18:21

André Eriksson

4,3702 gold badges21 silver badges16 bronze badges

1 Comment

Spencer Ruport Over a year ago

Personally I prefer this since it doesn't require one time use variables be defined that look useless.

Brian Ramsay · Accepted Answer · 2009-07-27 18:21:35Z

1

A generic way to solve this scope problem:

parent_func = this;
$(":checked:checkbox").each(function(index) {
  $(parent_func).myFunction(); 
});

answered Jul 27, 2009 at 18:21

Brian Ramsay

7,6958 gold badges43 silver badges52 bronze badges

Comments

Artem Barger · Accepted Answer · 2009-07-27 18:25:44Z

0

Try this:

$("input:checkbox:checked").each(function(index) {
    $(this).myFunction.apply(this); 
  });

edited Jul 27, 2009 at 18:25

answered Jul 27, 2009 at 18:20

Artem Barger

41.3k9 gold badges61 silver badges81 bronze badges

Collectives™ on Stack Overflow

'this' is undefined in jQuery custom method

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related